{"id":10563,"date":"2021-08-24T00:00:00","date_gmt":"2021-08-24T00:00:00","guid":{"rendered":"https:\/\/dev95.site\/creating-slick-color-palette-apis\/"},"modified":"2021-08-24T00:00:00","modified_gmt":"2021-08-24T00:00:00","slug":"creating-slick-color-palette-apis","status":"publish","type":"post","link":"https:\/\/dev95.site\/ar\/creating-slick-color-palette-apis\/","title":{"rendered":"Creating Slick Color Palette APIs"},"content":{"rendered":"<div id=\"dev95-2515592358\" class=\"dev95-- dev95-entity-placement\" role=\"region\" aria-label=\"\u0627\u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a\"><script async=\"async\" data-cfasync=\"false\" src=\"https:\/\/pl27862732.profitableratecpmnetwork.com\/2ad7a50e0bbc23ac6801d7b77c501463\/invoke.js\"><\/script>\r\n<div id=\"container-2ad7a50e0bbc23ac6801d7b77c501463\"><\/div><\/div><div id=\"dev95-3170417129\" class=\"dev95-before-content dev95-entity-placement\" role=\"region\" aria-label=\"\u0627\u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a\"><p style=\"text-align: center;\"><strong>Stop wasting time on dead links! \ud83d\uded1 This smart platform automatically detects your device and country to give you the exact best offer instantly. Check it out now 100% free! \ud83d\udc47<\/strong><br data-sfc-root=\"ep\" data-sfc-pl=\"|||[]\" data-complete=\"true\" data-copy-service-computed-style=\"font-family: Arial, sans-serif, &quot;Noto Color Emoji&quot;; font-size: 16px; font-weight: 400; margin: 0px; text-decoration: none; border-bottom: 0px rgb(10, 10, 10);\" \/><a href=\"https:\/\/www.profitableratecpmnetwork.com\/pvhx5mbcc?key=ff7d362db3c20bc86fad685cc94f1fc4\">\ud83d\udd17 <strong class=\"rQesXe MPyX\" data-sfc-cp=\"\" data-sfc-root=\"ep\" data-complete=\"true\" aria-owns=\"action-menu-parent-container\" data-copy-service-computed-style=\"font-family: Arial, sans-serif, &quot;Noto Color Emoji&quot;; font-size: 16px; font-weight: 700; margin: 0px; text-decoration: none; border-bottom: 0px rgb(10, 10, 10);\">[Click here]<\/strong><\/a><\/p>\n<\/div><div>\n<p>The work of writing maintainable code is an ongoing endeavor and some of my favorite problems to solve are ones that build maintainable systems. Maintainable systems are ones you can learn once, easily manipulate, and ideally take from project to project. My favorite part of building maintainable systems is that it minimizes the amount of work I need to do when starting a new project, and like it is for many programmers hitting \u2318 + \u21ea + N to start a new project is one of the most satisfying feelings in the world for me.<\/p><div id=\"dev95-3094686368\" class=\"dev95- dev95-entity-placement\" role=\"region\" aria-label=\"\u0627\u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a\"><center>\r\n<script>\r\n  atOptions = {\r\n    'key' : '4ba6b6513c00e0ba76511f798ae56401',\r\n    'format' : 'iframe',\r\n    'height' : 50,\r\n    'width' : 320,\r\n    'params' : {}\r\n  };\r\n<\/script>\r\n<script src=\"https:\/\/www.highrevenueformat.com\/4ba6b6513c00e0ba76511f798ae56401\/invoke.js\"><\/script>\r\n\t<\/center><\/div>\n<p><!--preview-snippet--><\/p>\n<p>A color palette is something every well-designed app needs, and it turns out there are a lot of ways to solve this problem. If you don&#8217;t yet have a good sense for how to construct a color palette, I highly recommend <a href=\"https:\/\/www.refactoringui.com\/previews\/building-your-color-palette\">this post by Refactoring UI<\/a> that explains the fundamentals of a good color palette. Generating a good color palette can be tricky if you\u2019re new to the practice and can require some trial and error, so if you\u2019d like a shortcut a tool like <a href=\"https:\/\/coolors.co\/\">Coolors<\/a> is a great starting point.<\/p>\n<p>I&#8217;ve spent years iterating on approaches to codifying color palettes in my iOS and macOS apps, seeking to create one that\u2019s flexible, scales well, and is easy to understand, landing on the version we\u2019ll explore below. We&#8217;ll be able to leverage asset catalogs, create a clear sense of hierarchy, provide statically typed semantic colors, even take advantage of the built in features of SwiftUI. As a bonus, if you&#8217;re working with designers, your palette will be so straightforward to modify that a designer can submit a pull request to change colors without ever involving you.<\/p>\n<hr>\n<p>Considering we&#8217;ll be leveraging asset catalogs, the first step should be pretty intuitive, we should create an asset catalog to hold our color palettes.<\/p>\n<p><span class=\"gatsby-resp-image-wrapper\" style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 534px; \"><br \/>\n      <a class=\"gatsby-resp-image-link\" href=\"https:\/\/i0.wp.com\/fabisevi.ch\/static\/280e1a499cb4929777117648ebcf35dc\/07854\/color-palette-resources-folder.jpg?ssl=1\" style=\"display: block\" target=\"_blank\" rel=\"noopener\"><br \/>\n    <span class=\"gatsby-resp-image-background-image\" style=\"padding-bottom: 34.5679012345679%; position: relative; bottom: 0; left: 0; background-image: url('data:image\/jpeg;base64,\/9j\/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P\/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P\/wgARCAAHABQDASIAAhEBAxEB\/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIDBf\/EABQBAQAAAAAAAAAAAAAAAAAAAAD\/2gAMAwEAAhADEAAAAc6QUg\/\/xAAXEAEAAwAAAAAAAAAAAAAAAAABAAIQ\/9oACAEBAAEFAqsc\/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP\/aAAgBAwEBPwE\/\/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP\/aAAgBAgEBPwE\/\/8QAFxAAAwEAAAAAAAAAAAAAAAAAAAEQMf\/aAAgBAQAGPwIxT\/\/EABgQAAMBAQAAAAAAAAAAAAAAAAABESFx\/9oACAEBAAE\/IdpBaD4f\/9oADAMBAAIAAwAAABB77\/\/EABQRAQAAAAAAAAAAAAAAAAAAABD\/2gAIAQMBAT8QP\/\/EABQRAQAAAAAAAAAAAAAAAAAAABD\/2gAIAQIBAT8QP\/\/EABcQAQEBAQAAAAAAAAAAAAAAAAERIQD\/2gAIAQEAAT8QIyx7cmRbWpyMwd\/\/2Q=='); background-size: cover; display: block;\"><\/span>\n  <picture><source srcset=\"\/static\/280e1a499cb4929777117648ebcf35dc\/fc615\/color-palette-resources-folder.avif 243w, \n\/static\/280e1a499cb4929777117648ebcf35dc\/b3175\/color-palette-resources-folder.avif 485w,\n\/static\/280e1a499cb4929777117648ebcf35dc\/286f7\/color-palette-resources-folder.avif 534w\" sizes=\"(max-width: 534px) 100vw, 534px\" type=\"image\/avif\"><source srcset=\"\/static\/280e1a499cb4929777117648ebcf35dc\/0e3e2\/color-palette-resources-folder.webp 243w, \n\/static\/280e1a499cb4929777117648ebcf35dc\/749af\/color-palette-resources-folder.webp 485w,\n\/static\/280e1a499cb4929777117648ebcf35dc\/29722\/color-palette-resources-folder.webp 534w\" sizes=\"(max-width: 534px) 100vw, 534px\" type=\"image\/webp\"><source srcset=\"\/static\/280e1a499cb4929777117648ebcf35dc\/3f316\/color-palette-resources-folder.jpg 243w, \n\/static\/280e1a499cb4929777117648ebcf35dc\/0d3a1\/color-palette-resources-folder.jpg 485w,\n\/static\/280e1a499cb4929777117648ebcf35dc\/07854\/color-palette-resources-folder.jpg 534w\" sizes=\"(max-width: 534px) 100vw, 534px\" type=\"image\/jpeg\"><br \/>\n          <img data-recalc-dims=\"1\" class=\"gatsby-resp-image-image\" src=\"https:\/\/i0.wp.com\/fabisevi.ch\/static\/280e1a499cb4929777117648ebcf35dc\/07854\/color-palette-resources-folder.jpg?w=1280&#038;ssl=1\" alt=\"An image displaying an asset catalog in a folder called Resources\" title=\"An image displaying an asset catalog in a folder called Resources\" loading=\"lazy\" decoding=\"async\" style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\">\n        <\/picture>\n  <\/a><br \/>\n    <\/span><\/p>\n<p>As I was piecing together different instructions and ideas this second step confused me, so I&#8217;ll spare you the misery. You&#8217;re going to want to make a different folder for each color palette you create, and you can do that by right clicking in the asset catalog and selecting <em>New Folder<\/em>.<\/p>\n<p><span class=\"gatsby-resp-image-wrapper\" style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \"><br \/>\n      <a class=\"gatsby-resp-image-link\" href=\"https:\/\/i0.wp.com\/fabisevi.ch\/static\/ee87dfb419a3af64b7da4eee6a768652\/f93b5\/color-palette-right-click.jpg?ssl=1\" style=\"display: block\" target=\"_blank\" rel=\"noopener\"><br \/>\n    <span class=\"gatsby-resp-image-background-image\" style=\"padding-bottom: 178.18930041152262%; position: relative; bottom: 0; left: 0; background-image: url('data:image\/jpeg;base64,\/9j\/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P\/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P\/wgARCAAkABQDASIAAhEBAxEB\/8QAGAABAQEBAQAAAAAAAAAAAAAAAAQCBQP\/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf\/aAAwDAQACEAMQAAAB9Z9yneYHOlqms7Yl3gKQf\/\/EAB0QAAICAgMBAAAAAAAAAAAAAAIDADMBBBETFCH\/2gAIAQEAAQUCcw8N7mTVLJKfdNOl9vE1KX3fZqUkgCLyriwwsf\/EABQRAQAAAAAAAAAAAAAAAAAAACD\/2gAIAQMBAT8BX\/\/EABQRAQAAAAAAAAAAAAAAAAAAACD\/2gAIAQIBAT8BX\/\/EAB0QAAICAwADAAAAAAAAAAAAAAACAREQcYEhMkH\/2gAIAQEABj8CaIaT3ktpvyNvHR946NvHS5s+lKf\/xAAdEAACAgIDAQAAAAAAAAAAAAAAAREhQbExUZFh\/9oACAEBAAE\/IU0CTqxynJw0rY0CbnBtCNxLwS6NwZ0sNwN4fLj+jbj0Wyjmz\/\/aAAwDAQACAAMAAAAQwMtAAA\/\/xAAWEQADAAAAAAAAAAAAAAAAAAAQICH\/2gAIAQMBAT8QFT\/\/xAAWEQADAAAAAAAAAAAAAAAAAAAQICH\/2gAIAQIBAT8QET\/\/xAAeEAEAAwACAgMAAAAAAAAAAAABABEhQWFRcTGh4f\/aAAgBAQABPxCnVUFAwhlh1cxBJyVDtjXh6IVsHfMxEEJvkeCJtCe6gTZX5QOJ7HggtJXVR3qQvW7a5T5D6coMLults\/\/Z'); background-size: cover; display: block;\"><\/span>\n  <picture><source srcset=\"\/static\/ee87dfb419a3af64b7da4eee6a768652\/fc615\/color-palette-right-click.avif 243w, \n\/static\/ee87dfb419a3af64b7da4eee6a768652\/e47c0\/color-palette-right-click.avif 300w\" sizes=\"(max-width: 300px) 100vw, 300px\" type=\"image\/avif\"><source srcset=\"\/static\/ee87dfb419a3af64b7da4eee6a768652\/0e3e2\/color-palette-right-click.webp 243w, \n\/static\/ee87dfb419a3af64b7da4eee6a768652\/c85cb\/color-palette-right-click.webp 300w\" sizes=\"(max-width: 300px) 100vw, 300px\" type=\"image\/webp\"><source srcset=\"\/static\/ee87dfb419a3af64b7da4eee6a768652\/3f316\/color-palette-right-click.jpg 243w, \n\/static\/ee87dfb419a3af64b7da4eee6a768652\/f93b5\/color-palette-right-click.jpg 300w\" sizes=\"(max-width: 300px) 100vw, 300px\" type=\"image\/jpeg\"><br \/>\n          <img data-recalc-dims=\"1\" class=\"gatsby-resp-image-image\" src=\"https:\/\/i0.wp.com\/fabisevi.ch\/static\/ee87dfb419a3af64b7da4eee6a768652\/f93b5\/color-palette-right-click.jpg?w=1280&#038;ssl=1\" alt=\"An image displaying a New Folder option when you right click inside of an empty asset catalog\" title=\"An image displaying a New Folder option when you right click inside of an empty asset catalog\" loading=\"lazy\" decoding=\"async\" style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\">\n        <\/picture>\n  <\/a><br \/>\n    <\/span><\/p>\n<p>Now it&#8217;s time to create our color palettes. I&#8217;m showing you the Night palette I created for my app, and below it are Spring, Summer, and Winter. Each palette has the same name but all of the colors are named the same, each palette will have colors named background-alt, primary, quaternary, etc.<\/p>\n<p><span class=\"gatsby-resp-image-wrapper\" style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 970px; \"><br \/>\n      <a class=\"gatsby-resp-image-link\" href=\"https:\/\/i0.wp.com\/fabisevi.ch\/static\/b6c2900ee71e722221807bec730baa68\/a525f\/color-palette-asset-catalog.jpg?ssl=1\" style=\"display: block\" target=\"_blank\" rel=\"noopener\"><br \/>\n    <span class=\"gatsby-resp-image-background-image\" style=\"padding-bottom: 57.61316872427983%; position: relative; bottom: 0; left: 0; background-image: url('data:image\/jpeg;base64,\/9j\/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P\/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P\/wgARCAAMABQDASIAAhEBAxEB\/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBBAX\/xAAUAQEAAAAAAAAAAAAAAAAAAAAA\/9oADAMBAAIQAxAAAAHOZWK5Af\/EABgQAQEAAwAAAAAAAAAAAAAAAAEQACEx\/9oACAEBAAEFAjHcOM\/\/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ\/9oACAEDAQE\/AT\/\/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ\/9oACAECAQE\/AT\/\/xAAWEAADAAAAAAAAAAAAAAAAAAAAICH\/2gAIAQEABj8CKv8A\/8QAGhAAAgMBAQAAAAAAAAAAAAAAAAERMYEQsf\/aAAgBAQABPyGmjNpRYoJPQtz\/2gAMAwEAAgADAAAAEAQv\/8QAFREBAQAAAAAAAAAAAAAAAAAAEEH\/2gAIAQMBAT8Qh\/\/EABQRAQAAAAAAAAAAAAAAAAAAABD\/2gAIAQIBAT8QP\/\/EAB0QAAEEAgMAAAAAAAAAAAAAAAEAESExkbEQUWH\/2gAIAQEAAT8QueZWmSJ8AwET6GFub5P\/2Q=='); background-size: cover; display: block;\"><\/span>\n  <picture><source srcset=\"\/static\/b6c2900ee71e722221807bec730baa68\/fc615\/color-palette-asset-catalog.avif 243w, \n\/static\/b6c2900ee71e722221807bec730baa68\/b3175\/color-palette-asset-catalog.avif 485w,\n\/static\/b6c2900ee71e722221807bec730baa68\/006d3\/color-palette-asset-catalog.avif 970w,\n\/static\/b6c2900ee71e722221807bec730baa68\/b52ec\/color-palette-asset-catalog.avif 1455w,\n\/static\/b6c2900ee71e722221807bec730baa68\/44c94\/color-palette-asset-catalog.avif 1940w,\n\/static\/b6c2900ee71e722221807bec730baa68\/7767f\/color-palette-asset-catalog.avif 2768w\" sizes=\"(max-width: 970px) 100vw, 970px\" type=\"image\/avif\"><source srcset=\"\/static\/b6c2900ee71e722221807bec730baa68\/0e3e2\/color-palette-asset-catalog.webp 243w, \n\/static\/b6c2900ee71e722221807bec730baa68\/749af\/color-palette-asset-catalog.webp 485w,\n\/static\/b6c2900ee71e722221807bec730baa68\/dbca2\/color-palette-asset-catalog.webp 970w,\n\/static\/b6c2900ee71e722221807bec730baa68\/bda17\/color-palette-asset-catalog.webp 1455w,\n\/static\/b6c2900ee71e722221807bec730baa68\/0dc73\/color-palette-asset-catalog.webp 1940w,\n\/static\/b6c2900ee71e722221807bec730baa68\/7fe0f\/color-palette-asset-catalog.webp 2768w\" sizes=\"(max-width: 970px) 100vw, 970px\" type=\"image\/webp\"><source srcset=\"\/static\/b6c2900ee71e722221807bec730baa68\/3f316\/color-palette-asset-catalog.jpg 243w, \n\/static\/b6c2900ee71e722221807bec730baa68\/0d3a1\/color-palette-asset-catalog.jpg 485w,\n\/static\/b6c2900ee71e722221807bec730baa68\/ec7ce\/color-palette-asset-catalog.jpg 970w,\n\/static\/b6c2900ee71e722221807bec730baa68\/8010b\/color-palette-asset-catalog.jpg 1455w,\n\/static\/b6c2900ee71e722221807bec730baa68\/f32bc\/color-palette-asset-catalog.jpg 1940w,\n\/static\/b6c2900ee71e722221807bec730baa68\/a525f\/color-palette-asset-catalog.jpg 2768w\" sizes=\"(max-width: 970px) 100vw, 970px\" type=\"image\/jpeg\"><br \/>\n          <img data-recalc-dims=\"1\" class=\"gatsby-resp-image-image\" src=\"https:\/\/i0.wp.com\/fabisevi.ch\/static\/b6c2900ee71e722221807bec730baa68\/ec7ce\/color-palette-asset-catalog.jpg?w=1280&#038;ssl=1\" alt=\"An image displaying four color palettes from my app\" title=\"An image displaying four color palettes from my app\" loading=\"lazy\" decoding=\"async\" style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\">\n        <\/picture>\n  <\/a><br \/>\n    <\/span><\/p>\n<p><strong>Do not miss this incredibly important step, guide your eyes towards the pink arrow on the right side of the image.<\/strong> You must select the folder you&#8217;re adding colors to and check the <strong>Provides Namespace checkbox<\/strong>. This is what will enable our code to have a clear and consistent naming structure, matching the folder\u2019s name to our palette&#8217;s name.<\/p>\n<hr>\n<p>Now that we&#8217;ve got our asset catalogs setup, we&#8217;re ready to write some code. We&#8217;ll start by constructing a new <code class=\"language-text\">Palette<\/code> struct, and populating it with some <code class=\"language-text\">Color<\/code>s that we&#8217;ll reference across our app.<\/p>\n<div class=\"gatsby-highlight\" data-language=\"swift\">\n<pre class=\"language-swift\"><code class=\"language-swift\"><span class=\"token keyword\">extension<\/span> <span class=\"token class-name\">Color<\/span> <span class=\"token punctuation\">{<\/span>\n\n    <span class=\"token keyword\">struct<\/span> <span class=\"token class-name\">Palette<\/span> <span class=\"token punctuation\">{<\/span>\n        <span class=\"token keyword\">let<\/span> name<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">String<\/span>\n\n        <span class=\"token keyword\">var<\/span> mainBackground<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Color<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">(<\/span>fromPalette<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">,<\/span> semanticName<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"background-main\"<\/span><\/span><span class=\"token punctuation\">)<\/span>\n        <span class=\"token punctuation\">}<\/span>\n\n        <span class=\"token keyword\">var<\/span> midBackground<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Color<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">(<\/span>fromPalette<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">,<\/span> semanticName<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"background-mid\"<\/span><\/span><span class=\"token punctuation\">)<\/span>\n        <span class=\"token punctuation\">}<\/span>\n\n        <span class=\"token keyword\">var<\/span> alternativeBackground<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Color<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">(<\/span>fromPalette<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">,<\/span> semanticName<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"background-alt\"<\/span><\/span><span class=\"token punctuation\">)<\/span>\n        <span class=\"token punctuation\">}<\/span>\n\n        <span class=\"token keyword\">var<\/span> primaryText<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Color<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">(<\/span>fromPalette<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">,<\/span> semanticName<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"text-primary\"<\/span><\/span><span class=\"token punctuation\">)<\/span>\n        <span class=\"token punctuation\">}<\/span>\n\n        <span class=\"token keyword\">var<\/span> alternativeText<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Color<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">(<\/span>fromPalette<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">,<\/span> semanticName<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"text-alt\"<\/span><\/span><span class=\"token punctuation\">)<\/span>\n        <span class=\"token punctuation\">}<\/span>\n\n        <span class=\"token keyword\">var<\/span> primary<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Color<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">(<\/span>fromPalette<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">,<\/span> semanticName<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"primary\"<\/span><\/span><span class=\"token punctuation\">)<\/span>\n        <span class=\"token punctuation\">}<\/span>\n\n        <span class=\"token keyword\">var<\/span> secondary<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Color<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">(<\/span>fromPalette<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">,<\/span> semanticName<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"secondary\"<\/span><\/span><span class=\"token punctuation\">)<\/span>\n        <span class=\"token punctuation\">}<\/span>\n\n        <span class=\"token keyword\">var<\/span> tertiary<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Color<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">(<\/span>fromPalette<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">,<\/span> semanticName<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"tertiary\"<\/span><\/span><span class=\"token punctuation\">)<\/span>\n        <span class=\"token punctuation\">}<\/span>\n\n        <span class=\"token keyword\">var<\/span> quaternary<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Color<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">(<\/span>fromPalette<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">,<\/span> semanticName<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"quaternary\"<\/span><\/span><span class=\"token punctuation\">)<\/span>\n        <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<\/div>\n<p>This is a pretty standard palette and should cover most of the use cases you&#8217;ll encounter in building an app. You can modify it to your needs, but the important thing is that the colors you choose need to match the names of the colors you declared in your asset catalog. But what is this <code class=\"language-text\">Color(fromPalette:semanticName:)<\/code> initializer?<\/p>\n<div class=\"gatsby-highlight\" data-language=\"swift\">\n<pre class=\"language-swift\"><code class=\"language-swift\"><span class=\"token keyword\">private<\/span> <span class=\"token keyword\">extension<\/span> <span class=\"token class-name\">Color<\/span> <span class=\"token punctuation\">{<\/span>\n\n    <span class=\"token keyword\">init<\/span><span class=\"token punctuation\">(<\/span>fromPalette palette<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">String<\/span><span class=\"token punctuation\">,<\/span> semanticName<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">String<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n        <span class=\"token directive property\"><span class=\"token directive-name\">#if<\/span> os<span class=\"token punctuation\">(<\/span>macOS<span class=\"token punctuation\">)<\/span><\/span>\n        <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span><span class=\"token keyword\">init<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">NSColor<\/span><span class=\"token punctuation\">(<\/span>named<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"<\/span><span class=\"token interpolation-punctuation punctuation\">(<\/span><span class=\"token interpolation\">palette<\/span><span class=\"token interpolation-punctuation punctuation\">)<\/span><span class=\"token string\">\/<\/span><span class=\"token interpolation-punctuation punctuation\">(<\/span><span class=\"token interpolation\">semanticName<\/span><span class=\"token interpolation-punctuation punctuation\">)<\/span><span class=\"token string\">\"<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">!<\/span><span class=\"token punctuation\">)<\/span>\n        <span class=\"token directive property\"><span class=\"token directive-name\">#else<\/span><\/span>\n        <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">.<\/span><span class=\"token keyword\">init<\/span><span class=\"token punctuation\">(<\/span><span class=\"token class-name\">UIColor<\/span><span class=\"token punctuation\">(<\/span>named<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"<\/span><span class=\"token interpolation-punctuation punctuation\">(<\/span><span class=\"token interpolation\">palette<\/span><span class=\"token interpolation-punctuation punctuation\">)<\/span><span class=\"token string\">\/<\/span><span class=\"token interpolation-punctuation punctuation\">(<\/span><span class=\"token interpolation\">semanticName<\/span><span class=\"token interpolation-punctuation punctuation\">)<\/span><span class=\"token string\">\"<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">!<\/span><span class=\"token punctuation\">)<\/span>\n        <span class=\"token directive property\"><span class=\"token directive-name\">#endif<\/span><\/span>\n    <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<\/div>\n<p>You can just as easily use a private method in <code class=\"language-text\">Color.Palette<\/code>, something like <code class=\"language-text\">private func assetCatalogColor(semanticName: String)<\/code>. I happen to prefer the ergonomics of a custom initializer, and this whole post is about improving ergonomics, so let&#8217;s run with that.<\/p>\n<p>This initializer lives in <code class=\"language-text\">Color.Palette<\/code> and takes advantage of our namespaced folder structure to pull out colors from the asset catalog. <code class=\"language-text\">palette<\/code> unsurprisingly is the name of our color palette, and <code class=\"language-text\">semanticName<\/code> is the name of the color we&#8217;re pulling out of it, such as <code class=\"language-text\">primary<\/code>, <code class=\"language-text\">secondary<\/code>, or <code class=\"language-text\">background-main<\/code>. Combining the two with a <code class=\"language-text\">\/<\/code>, we&#8217;ll get the <code class=\"language-text\">primary<\/code>, <code class=\"language-text\">secondary<\/code>, or <code class=\"language-text\">background-main<\/code> color from our current palette. All that&#8217;s left is to define the palettes we&#8217;ll be constructing.<\/p>\n<div class=\"gatsby-highlight\" data-language=\"swift\">\n<pre class=\"language-swift\"><code class=\"language-swift\"><span class=\"token keyword\">extension<\/span> <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">.<\/span><span class=\"token class-name\">Palette<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">let<\/span> spring <span class=\"token operator\">=<\/span> <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">.<\/span><span class=\"token class-name\">Palette<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"Spring\"<\/span><\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">let<\/span> summer <span class=\"token operator\">=<\/span> <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">.<\/span><span class=\"token class-name\">Palette<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"Summer\"<\/span><\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">let<\/span> autumn <span class=\"token operator\">=<\/span> <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">.<\/span><span class=\"token class-name\">Palette<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"Autumn\"<\/span><\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">let<\/span> winter <span class=\"token operator\">=<\/span> <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">.<\/span><span class=\"token class-name\">Palette<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"Winter\"<\/span><\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">let<\/span> day <span class=\"token operator\">=<\/span> <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">.<\/span><span class=\"token class-name\">Palette<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"Day\"<\/span><\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">let<\/span> dusk <span class=\"token operator\">=<\/span> <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">.<\/span><span class=\"token class-name\">Palette<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"Dusk\"<\/span><\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">let<\/span> night <span class=\"token operator\">=<\/span> <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">.<\/span><span class=\"token class-name\">Palette<\/span><span class=\"token punctuation\">(<\/span>name<span class=\"token punctuation\">:<\/span> <span class=\"token string-literal\"><span class=\"token string\">\"Night\"<\/span><\/span><span class=\"token punctuation\">)<\/span>\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<\/div>\n<p>Constructing palettes is pretty easy. All you have to do is instantiate a <code class=\"language-text\">Color.Palette<\/code> object with a name. That name must match the folder name, so in my app the palette name for <code class=\"language-text\">Night<\/code> will be <code class=\"language-text\">Night<\/code> because the folder we chose for that palete was <code class=\"language-text\">\"Night\"<\/code>.<\/p>\n<hr>\n<p>Now that we have a color palette created, we should probably start using it. If you&#8217;re using UIKit you&#8217;ll likely have built your palette atop <code class=\"language-text\">UIColor<\/code> instead of <code class=\"language-text\">Color<\/code> and used <code class=\"language-text\">.palette.primaryText<\/code> wherever a <code class=\"language-text\">UIColor<\/code> is expected.<\/p>\n<p>But if we&#8217;re building our app in SwiftUI, we can go the extra mile with just a few lines of code to leverage the <code class=\"language-text\">Environment<\/code>, making our palette easily accessible and SwiftUI-friendly.<\/p>\n<div class=\"gatsby-highlight\" data-language=\"swift\">\n<pre class=\"language-swift\"><code class=\"language-swift\"><span class=\"token keyword\">private<\/span> <span class=\"token keyword\">struct<\/span> <span class=\"token class-name\">ColorPaletteKey<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">EnvironmentKey<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token comment\">\/\/ We need to default to a palette so without any particular preference let's pick `day`<\/span>\n    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">let<\/span> defaultValue <span class=\"token operator\">=<\/span> <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">.<\/span><span class=\"token class-name\">Palette<\/span><span class=\"token punctuation\">.<\/span>day\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">extension<\/span> <span class=\"token class-name\">EnvironmentValues<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">var<\/span> preferredColorPalette<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">Color<\/span><span class=\"token punctuation\">.<\/span><span class=\"token class-name\">Palette<\/span> <span class=\"token punctuation\">{<\/span>\n        <span class=\"token keyword\">get<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">[<\/span><span class=\"token class-name\">ColorPaletteKey<\/span><span class=\"token punctuation\">.<\/span><span class=\"token keyword\">self<\/span><span class=\"token punctuation\">]<\/span>\n        <span class=\"token punctuation\">}<\/span>\n        <span class=\"token keyword\">set<\/span> <span class=\"token punctuation\">{<\/span>\n            <span class=\"token keyword\">self<\/span><span class=\"token punctuation\">[<\/span><span class=\"token class-name\">ColorPaletteKey<\/span><span class=\"token punctuation\">.<\/span><span class=\"token keyword\">self<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> newValue\n        <span class=\"token punctuation\">}<\/span>\n    <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<\/div>\n<p>This creates the <code class=\"language-text\">preferredColorPalette<\/code> property in our <code class=\"language-text\">Environment<\/code>. If you&#8217;re not sure how the <code class=\"language-text\">Environment<\/code> works there are a lot of great resources on the internet like <a href=\"https:\/\/useyourloaf.com\/blog\/swiftui-custom-environment-values\/\">this post by Keith Harrison<\/a>.<\/p>\n<div class=\"gatsby-highlight\" data-language=\"swift\">\n<pre class=\"language-swift\"><code class=\"language-swift\"><span class=\"token keyword\">struct<\/span> <span class=\"token class-name\">HeaderView<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">View<\/span> <span class=\"token punctuation\">{<\/span>\n\n\t<span class=\"token attribute atrule\">@Environment<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\"><\/span><span class=\"token punctuation\">.<\/span>preferredColorPalette<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">private<\/span> <span class=\"token keyword\">var<\/span> palette\n\n\t<span class=\"token keyword\">var<\/span> body<span class=\"token punctuation\">:<\/span> <span class=\"token class-name\">View<\/span> <span class=\"token punctuation\">{<\/span>\n\t\t<span class=\"token class-name\">Text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string-literal\"><span class=\"token string\">\"Hello World\"<\/span><\/span><span class=\"token punctuation\">)<\/span>\n\t\t\t<span class=\"token punctuation\">.<\/span><span class=\"token function\">foregroundColor<\/span><span class=\"token punctuation\">(<\/span>palette<span class=\"token punctuation\">.<\/span>primaryText<span class=\"token punctuation\">)<\/span>\n\t<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<\/div>\n<p>Now accessing our colors is a nothing more than two lines of code, how slick is that?<\/p>\n<hr>\n<p>Hope I didn&#8217;t wear you out, there&#8217;s a lot here, but when you throw it into Xcode you&#8217;ll see that it&#8217;s pretty easy to digest. After a few iterations I&#8217;m really happy with this solution and have been using it in my personal apps for a while now. It allows us to easily add or change colors, have a visual representation of our colors, with minimal code, and a pretty slick API.<\/p>\n<p>But no code is perfect (except for <a href=\"https:\/\/en.wikipedia.org\/wiki\/Merge_sort\">mergesort<\/a>), so I&#8217;m always looking for improvements. I&#8217;m excited to hear your thoughts or <a href=\"https:\/\/twitter.com\/mergesort\">suggestions<\/a>, so don&#8217;t be shy about reaching out.<\/p>\n<\/div>\n<div class=\"pvc_clear\"><\/div>\n<p id=\"pvc_stats_10563\" class=\"pvc_stats total_only  \" data-element-id=\"10563\" style=\"\"><i class=\"pvc-stats-icon large\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> <img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" alt=\"Loading\" src=\"https:\/\/i0.wp.com\/dev95.site\/wp-content\/plugins\/page-views-count\/ajax-loader-2x.gif?resize=16%2C16&#038;ssl=1\" border=0 \/><\/p>\n<div class=\"pvc_clear\"><\/div>\n<div id=\"dev95-1023646187\" class=\"dev95-after-content dev95-entity-placement\" role=\"region\" aria-label=\"\u0627\u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a\"><p style=\"text-align: center;\"><strong>Finally, a link that actually works for your region and device! \ud83c\udf0d Get instant access to the top exclusive offers tailored just for you right now. Don&#8217;t miss out, click here! \ud83d\udc47<\/strong><br data-sfc-root=\"ep\" data-sfc-pl=\"|||[]\" data-complete=\"true\" data-copy-service-computed-style=\"font-family: Arial, sans-serif, &quot;Noto Color Emoji&quot;; font-size: 16px; font-weight: 400; margin: 0px; text-decoration: none; border-bottom: 0px rgb(10, 10, 10);\" \/><a href=\"https:\/\/www.profitableratecpmnetwork.com\/uzeja8ahze?key=bc876be53d6ad0ff6370ab8ea030e479\"><strong>\ud83d\udd17 [Click here]<\/strong><\/a><\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>The work of writing maintainable code is an ongoing endeavor and some of my favorite problems to solve are ones that build maintainable systems. Maintainable systems are ones you can learn once, easily manipulate, and ideally take from project to<\/p>\n<div class=\"hosteria-entry-more\"><a href=\"https:\/\/dev95.site\/ar\/creating-slick-color-palette-apis\/\" class=\"no-underline font-light  group-hover:text-primary-800 dark:group-hover:text-primary-300 py-1\">Read more &gt;&gt;&gt;<\/a><\/div>\n<div class=\"pvc_clear\"><\/div>\n<p id=\"pvc_stats_10563\" class=\"pvc_stats total_only\" data-element-id=\"10563\" style=\"\"><i class=\"pvc-stats-icon large\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> <img loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" alt=\"Loading\" src=\"https:\/\/dev95.site\/wp-content\/plugins\/page-views-count\/ajax-loader-2x.gif\" border=\"0\" \/><\/p>\n<div class=\"pvc_clear\"><\/div>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fp_fajr_begins":"","fp_fajr_iqamah":"","fp_dhuhr_begins":"","fp_dhuhr_iqamah":"","fp_asr_begins":"","fp_asr_iqamah":"","fp_maghrib_begins":"","fp_maghrib_iqamah":"","fp_isha_begins":"","fp_isha_iqamah":"","fp_midnight":"","fp_midnight_name":"","fp_sunrise":"","fp_single_prayer_begins_title":"","fp_single_prayer_iqamah_title":"","fp_prayer_times_for_today":"","fp_hijra_date":"","fp_fajr_name":"","fp_dhuhr_name":"","fp_asr_name":"","fp_maghrib_name":"","fp_isha_name":"","fp_sunrise_name":"","fp_currentDate":"","fp_current_time":"","fp_current_title":"","fp_current_location":"","fp_masjid_name":"","fp_prayer_title":"","fp_next_prayer_iqamah_time":"","fp_next_prayer_iqamah_title":"","fp_next_prayer_begins_time":"","fp_next_prayer_begins_title":"","fp_next_prayer_title":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[37],"tags":[],"class_list":["post-10563","post","type-post","status-publish","format-standard","hentry","category-posts"],"a3_pvc":{"activated":true,"total_views":3,"today_views":0},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Creating Slick Color Palette APIs - Dev95<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dev95.site\/ar\/creating-slick-color-palette-apis\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Slick Color Palette APIs - Dev95\" \/>\n<meta property=\"og:description\" content=\"The work of writing maintainable code is an ongoing endeavor and some of my favorite problems to solve are ones that build maintainable systems. Maintainable systems are ones you can learn once, easily manipulate, and ideally take from project toRead more &gt;&gt;&gt;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dev95.site\/ar\/creating-slick-color-palette-apis\/\" \/>\n<meta property=\"og:site_name\" content=\"Dev95\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-24T00:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fabisevi.ch\/static\/280e1a499cb4929777117648ebcf35dc\/07854\/color-palette-resources-folder.jpg\" \/>\n<meta name=\"author\" content=\"dev95\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0643\u064f\u062a\u0628 \u0628\u0648\u0627\u0633\u0637\u0629\" \/>\n\t<meta name=\"twitter:data1\" content=\"dev95\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 \u062f\u0642\u0627\u0626\u0642\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/dev95.site\\\/creating-slick-color-palette-apis\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/dev95.site\\\/creating-slick-color-palette-apis\\\/\"},\"author\":{\"name\":\"dev95\",\"@id\":\"https:\\\/\\\/dev95.site\\\/#\\\/schema\\\/person\\\/b807805ffe2916206b04d0938bce0298\"},\"headline\":\"Creating Slick Color Palette APIs\",\"datePublished\":\"2021-08-24T00:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/dev95.site\\\/creating-slick-color-palette-apis\\\/\"},\"wordCount\":952,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/dev95.site\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/dev95.site\\\/creating-slick-color-palette-apis\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fabisevi.ch\\\/static\\\/280e1a499cb4929777117648ebcf35dc\\\/07854\\\/color-palette-resources-folder.jpg\",\"articleSection\":[\"Posts\"],\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/dev95.site\\\/creating-slick-color-palette-apis\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/dev95.site\\\/creating-slick-color-palette-apis\\\/\",\"url\":\"https:\\\/\\\/dev95.site\\\/creating-slick-color-palette-apis\\\/\",\"name\":\"Creating Slick Color Palette APIs - Dev95\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/dev95.site\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/dev95.site\\\/creating-slick-color-palette-apis\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/dev95.site\\\/creating-slick-color-palette-apis\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fabisevi.ch\\\/static\\\/280e1a499cb4929777117648ebcf35dc\\\/07854\\\/color-palette-resources-folder.jpg\",\"datePublished\":\"2021-08-24T00:00:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/dev95.site\\\/creating-slick-color-palette-apis\\\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/dev95.site\\\/creating-slick-color-palette-apis\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/dev95.site\\\/creating-slick-color-palette-apis\\\/#primaryimage\",\"url\":\"https:\\\/\\\/fabisevi.ch\\\/static\\\/280e1a499cb4929777117648ebcf35dc\\\/07854\\\/color-palette-resources-folder.jpg\",\"contentUrl\":\"https:\\\/\\\/fabisevi.ch\\\/static\\\/280e1a499cb4929777117648ebcf35dc\\\/07854\\\/color-palette-resources-folder.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/dev95.site\\\/creating-slick-color-palette-apis\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/dev95.site\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Slick Color Palette APIs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/dev95.site\\\/#website\",\"url\":\"https:\\\/\\\/dev95.site\\\/\",\"name\":\"Dev95\",\"description\":\"Your comprehensive digital platform for knowledge, services, tools, and entertainment.\",\"publisher\":{\"@id\":\"https:\\\/\\\/dev95.site\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/dev95.site\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/dev95.site\\\/#organization\",\"name\":\"Dev95\",\"url\":\"https:\\\/\\\/dev95.site\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/dev95.site\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/dev95.site\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/rbrrbr-6.png?fit=512%2C512&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/dev95.site\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/rbrrbr-6.png?fit=512%2C512&ssl=1\",\"width\":512,\"height\":512,\"caption\":\"Dev95\"},\"image\":{\"@id\":\"https:\\\/\\\/dev95.site\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/dev95.site\\\/#\\\/schema\\\/person\\\/b807805ffe2916206b04d0938bce0298\",\"name\":\"dev95\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a70a73d950838b20cd80d7ebdc955737e802e8cd896044c5473b32b946c0662a?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a70a73d950838b20cd80d7ebdc955737e802e8cd896044c5473b32b946c0662a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a70a73d950838b20cd80d7ebdc955737e802e8cd896044c5473b32b946c0662a?s=96&d=mm&r=g\",\"caption\":\"dev95\"},\"url\":\"https:\\\/\\\/dev95.site\\\/ar\\\/author\\\/mohammad\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating Slick Color Palette APIs - Dev95","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dev95.site\/ar\/creating-slick-color-palette-apis\/","og_locale":"ar_AR","og_type":"article","og_title":"Creating Slick Color Palette APIs - Dev95","og_description":"The work of writing maintainable code is an ongoing endeavor and some of my favorite problems to solve are ones that build maintainable systems. Maintainable systems are ones you can learn once, easily manipulate, and ideally take from project toRead more &gt;&gt;&gt;","og_url":"https:\/\/dev95.site\/ar\/creating-slick-color-palette-apis\/","og_site_name":"Dev95","article_published_time":"2021-08-24T00:00:00+00:00","og_image":[{"url":"https:\/\/fabisevi.ch\/static\/280e1a499cb4929777117648ebcf35dc\/07854\/color-palette-resources-folder.jpg","type":"","width":"","height":""}],"author":"dev95","twitter_card":"summary_large_image","twitter_misc":{"\u0643\u064f\u062a\u0628 \u0628\u0648\u0627\u0633\u0637\u0629":"dev95","\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631":"6 \u062f\u0642\u0627\u0626\u0642"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/dev95.site\/creating-slick-color-palette-apis\/#article","isPartOf":{"@id":"https:\/\/dev95.site\/creating-slick-color-palette-apis\/"},"author":{"name":"dev95","@id":"https:\/\/dev95.site\/#\/schema\/person\/b807805ffe2916206b04d0938bce0298"},"headline":"Creating Slick Color Palette APIs","datePublished":"2021-08-24T00:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/dev95.site\/creating-slick-color-palette-apis\/"},"wordCount":952,"commentCount":0,"publisher":{"@id":"https:\/\/dev95.site\/#organization"},"image":{"@id":"https:\/\/dev95.site\/creating-slick-color-palette-apis\/#primaryimage"},"thumbnailUrl":"https:\/\/fabisevi.ch\/static\/280e1a499cb4929777117648ebcf35dc\/07854\/color-palette-resources-folder.jpg","articleSection":["Posts"],"inLanguage":"ar","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/dev95.site\/creating-slick-color-palette-apis\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/dev95.site\/creating-slick-color-palette-apis\/","url":"https:\/\/dev95.site\/creating-slick-color-palette-apis\/","name":"Creating Slick Color Palette APIs - Dev95","isPartOf":{"@id":"https:\/\/dev95.site\/#website"},"primaryImageOfPage":{"@id":"https:\/\/dev95.site\/creating-slick-color-palette-apis\/#primaryimage"},"image":{"@id":"https:\/\/dev95.site\/creating-slick-color-palette-apis\/#primaryimage"},"thumbnailUrl":"https:\/\/fabisevi.ch\/static\/280e1a499cb4929777117648ebcf35dc\/07854\/color-palette-resources-folder.jpg","datePublished":"2021-08-24T00:00:00+00:00","breadcrumb":{"@id":"https:\/\/dev95.site\/creating-slick-color-palette-apis\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dev95.site\/creating-slick-color-palette-apis\/"]}]},{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/dev95.site\/creating-slick-color-palette-apis\/#primaryimage","url":"https:\/\/fabisevi.ch\/static\/280e1a499cb4929777117648ebcf35dc\/07854\/color-palette-resources-folder.jpg","contentUrl":"https:\/\/fabisevi.ch\/static\/280e1a499cb4929777117648ebcf35dc\/07854\/color-palette-resources-folder.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/dev95.site\/creating-slick-color-palette-apis\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dev95.site\/"},{"@type":"ListItem","position":2,"name":"Creating Slick Color Palette APIs"}]},{"@type":"WebSite","@id":"https:\/\/dev95.site\/#website","url":"https:\/\/dev95.site\/","name":"Dev95","description":"\u0645\u0646\u0635\u062a\u0643 \u0627\u0644\u0631\u0642\u0645\u064a\u0629 \u0627\u0644\u0634\u0627\u0645\u0644\u0629 \u0644\u0644\u0645\u0639\u0631\u0641\u0629 \u0648\u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0648\u0627\u0644\u0623\u062f\u0648\u0627\u062a \u0648\u0627\u0644\u062a\u0631\u0641\u064a\u0647.","publisher":{"@id":"https:\/\/dev95.site\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dev95.site\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/dev95.site\/#organization","name":"Dev95","url":"https:\/\/dev95.site\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/dev95.site\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/dev95.site\/wp-content\/uploads\/2026\/07\/rbrrbr-6.png?fit=512%2C512&ssl=1","contentUrl":"https:\/\/i0.wp.com\/dev95.site\/wp-content\/uploads\/2026\/07\/rbrrbr-6.png?fit=512%2C512&ssl=1","width":512,"height":512,"caption":"Dev95"},"image":{"@id":"https:\/\/dev95.site\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/dev95.site\/#\/schema\/person\/b807805ffe2916206b04d0938bce0298","name":"dev95","image":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/secure.gravatar.com\/avatar\/a70a73d950838b20cd80d7ebdc955737e802e8cd896044c5473b32b946c0662a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a70a73d950838b20cd80d7ebdc955737e802e8cd896044c5473b32b946c0662a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a70a73d950838b20cd80d7ebdc955737e802e8cd896044c5473b32b946c0662a?s=96&d=mm&r=g","caption":"dev95"},"url":"https:\/\/dev95.site\/ar\/author\/mohammad\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/dev95.site\/ar\/wp-json\/wp\/v2\/posts\/10563","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev95.site\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev95.site\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev95.site\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev95.site\/ar\/wp-json\/wp\/v2\/comments?post=10563"}],"version-history":[{"count":0,"href":"https:\/\/dev95.site\/ar\/wp-json\/wp\/v2\/posts\/10563\/revisions"}],"wp:attachment":[{"href":"https:\/\/dev95.site\/ar\/wp-json\/wp\/v2\/media?parent=10563"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev95.site\/ar\/wp-json\/wp\/v2\/categories?post=10563"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev95.site\/ar\/wp-json\/wp\/v2\/tags?post=10563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}