{"id":744,"date":"2025-08-14T03:30:48","date_gmt":"2025-08-13T21:30:48","guid":{"rendered":"https:\/\/192.168.1.202\/?p=744"},"modified":"2026-02-04T13:24:08","modified_gmt":"2026-02-04T07:24:08","slug":"why-did-i-build-themer-the-color-editor-for-design-systems","status":"publish","type":"post","link":"https:\/\/creatrix.us\/?p=744","title":{"rendered":"Why did I build &#8216;Themer&#8217; the color editor for Design Systems"},"content":{"rendered":"\n<p>It\u2019s not like the internet is short on color tools. But most of them are either <strong>too basic<\/strong>\u2014fine for quick inspiration boards but not production\u2014or <strong>overengineered generators<\/strong> that still miss a critical capability:<\/p>\n\n\n\n<p>Adjusting lightness, contrast, and saturation curves across a palette to keep shades harmonious while maintaining proper contrast in both light and dark modes.<\/p>\n\n\n\n<p>As someone who\u2019s built and maintained design systems for large-scale products, this gap wasn\u2019t just an annoyance\u2014it was a recurring, time-consuming roadblock.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The pain is real<\/h3>\n\n\n\n<p>When you\u2019re responsible for design systems serving multiple platforms, brands, and millions of users, color isn\u2019t just decoration\u2014it\u2019s a functional part of the product.<\/p>\n\n\n\n<p>Yet building an accessible, harmonious palette across modes is messy:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fix a color in light mode, and it fails <strong>contrast<\/strong> in dark mode.<\/li>\n\n\n\n<li>Add one shade, and the tonal <strong>balance<\/strong> breaks everywhere.<\/li>\n\n\n\n<li>Spend <strong>hours<\/strong> juggling calculators, spreadsheets, Figma, pickers, and preview tools\u2014only to still tweak values manually.<\/li>\n<\/ul>\n\n\n\n<p>Over the years, I tried countless generators. Some looked sleek, some had advanced exports, but none actually solved the <strong>workflow problem<\/strong> I faced every time I refined a system.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How does another color generator solve the problem<\/h3>\n\n\n\n<p>I didn\u2019t want \u201canother pretty palette maker.\u201d I needed a <strong>system-aware generator<\/strong> that could:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Start from a single brand or base shade and produce evenly balanced variants.<\/li>\n\n\n\n<li>Offer fine control over lightness, contrast range, and saturation curves.<\/li>\n\n\n\n<li>Keep WCAG compliance intact across light and dark modes automatically.<\/li>\n\n\n\n<li>Add or adjust shades without breaking the rest of the system.<\/li>\n\n\n\n<li>Export directly into developer and designer-friendly formats\u2014CSS variables, JSON, or Figma.<\/li>\n<\/ul>\n\n\n\n<p>When I couldn\u2019t find a tool that did all that for free, so, I built one for myself.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"562\" src=\"https:\/\/192.168.1.202\/wp-content\/uploads\/2025\/08\/image-1-1024x562.png\" alt=\"\" class=\"wp-image-752\" srcset=\"https:\/\/creatrix.us\/wp-content\/uploads\/2025\/08\/image-1-1024x562.png 1024w, https:\/\/creatrix.us\/wp-content\/uploads\/2025\/08\/image-1-300x165.png 300w, https:\/\/creatrix.us\/wp-content\/uploads\/2025\/08\/image-1-768x422.png 768w, https:\/\/creatrix.us\/wp-content\/uploads\/2025\/08\/image-1-1536x844.png 1536w, https:\/\/creatrix.us\/wp-content\/uploads\/2025\/08\/image-1-2048x1125.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">How it actually Works<\/h3>\n\n\n\n<p>It starts with your <strong>base color<\/strong>\u2014the shade defining your brand\u2019s visual character\u2014and then:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Evenly spaces lightness values across your shades within user-defined min and max limits, ensuring visual consistency.<\/li>\n\n\n\n<li><strong>Saturation Curve Control<\/strong> \u2013 Lets you shape saturation:\n<ul class=\"wp-block-list\">\n<li>Linear \u2013 steady change across shades<\/li>\n\n\n\n<li>Arch-shaped \u2013 most saturated in the middle<\/li>\n\n\n\n<li>U-shaped \u2013 more saturated at the ends<br>This helps preserve your brand\u2019s tone, from muted elegance to bold vibrancy.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Prioritize to keep the exact hex value of the base color, but if it breaks harmony or contrast, it generates a visually identical alternative that fits better. Accessibility and harmony outweigh a stubborn hex value.<\/li>\n\n\n\n<li>Validates contrast ratios for both modes to keep text and UI accessible.<\/li>\n\n\n\n<li>Add shades without breaking the pattern, curves and balance are preserved.<\/li>\n<\/ol>\n\n\n\n<p>The result is a palette that\u2019s harmonious, accessible, and brand-aligned\u2014without choosing between beauty and usability.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/192.168.1.202\/wp-content\/uploads\/2025\/08\/Screenshot-2025-08-14-at-03.33.53-1024x683.png\" alt=\"\" class=\"wp-image-749\" srcset=\"https:\/\/creatrix.us\/wp-content\/uploads\/2025\/08\/Screenshot-2025-08-14-at-03.33.53-1024x683.png 1024w, https:\/\/creatrix.us\/wp-content\/uploads\/2025\/08\/Screenshot-2025-08-14-at-03.33.53-300x200.png 300w, https:\/\/creatrix.us\/wp-content\/uploads\/2025\/08\/Screenshot-2025-08-14-at-03.33.53-768x512.png 768w, https:\/\/creatrix.us\/wp-content\/uploads\/2025\/08\/Screenshot-2025-08-14-at-03.33.53-1536x1024.png 1536w, https:\/\/creatrix.us\/wp-content\/uploads\/2025\/08\/Screenshot-2025-08-14-at-03.33.53-2048x1366.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">The Impact on My Workflow<\/h3>\n\n\n\n<p>Palette creation has gone from a stressful, multi-tool juggling act to a smooth, predictable process. I can add and adjust shades without worrying about breaking the harmony of the existing set, and I know accessibility is handled from the start rather than as an afterthought. <\/p>\n\n\n\n<p>Engineers get exactly the variables they need without manual copy-pasting from Figma.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"655\" src=\"https:\/\/192.168.1.202\/wp-content\/uploads\/2025\/08\/Screenshot-2025-08-14-at-03.36.32-1024x655.png\" alt=\"\" class=\"wp-image-751\" srcset=\"https:\/\/creatrix.us\/wp-content\/uploads\/2025\/08\/Screenshot-2025-08-14-at-03.36.32-1024x655.png 1024w, https:\/\/creatrix.us\/wp-content\/uploads\/2025\/08\/Screenshot-2025-08-14-at-03.36.32-300x192.png 300w, https:\/\/creatrix.us\/wp-content\/uploads\/2025\/08\/Screenshot-2025-08-14-at-03.36.32-768x492.png 768w, https:\/\/creatrix.us\/wp-content\/uploads\/2025\/08\/Screenshot-2025-08-14-at-03.36.32-1536x983.png 1536w, https:\/\/creatrix.us\/wp-content\/uploads\/2025\/08\/Screenshot-2025-08-14-at-03.36.32-2048x1311.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What\u2019s Next?<\/h3>\n\n\n\n<p>I didn\u2019t build Themer to compete with other color generators. They each have their own strengths and purpose. I built it to do exactly <strong>what I needed, in the way I needed<\/strong>\u2014and decided to share it in case it helps someone else.<\/p>\n\n\n\n<p>It will always be free.<\/p>\n\n\n\n<p>Future updates may (or may not) bring advanced controls and design tool integrations, but the principle stays the same: <strong>accessibility, harmony, and real-world workflow over chasing perfect hex codes<\/strong>.<\/p>\n\n\n\n<p>Would you like to give it a try?<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/themer.creatrix.us\/\">Give it a try<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>It\u2019s not like the internet is short on color tools. But most of them are either too basic\u2014fine for quick inspiration boards but not production\u2014or overengineered generators that still miss a critical capability: Adjusting lightness, contrast, and saturation curves across a palette to keep shades harmonious while maintaining proper contrast in both light and dark [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":747,"comment_status":"open","ping_status":"open","sticky":false,"template":"single-with-sidebar","format":"standard","meta":{"footnotes":""},"categories":[50],"tags":[39,38],"class_list":["post-744","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case-study","tag-design-systems","tag-design-tools"],"_links":{"self":[{"href":"https:\/\/creatrix.us\/index.php?rest_route=\/wp\/v2\/posts\/744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creatrix.us\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creatrix.us\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creatrix.us\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/creatrix.us\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=744"}],"version-history":[{"count":7,"href":"https:\/\/creatrix.us\/index.php?rest_route=\/wp\/v2\/posts\/744\/revisions"}],"predecessor-version":[{"id":772,"href":"https:\/\/creatrix.us\/index.php?rest_route=\/wp\/v2\/posts\/744\/revisions\/772"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creatrix.us\/index.php?rest_route=\/wp\/v2\/media\/747"}],"wp:attachment":[{"href":"https:\/\/creatrix.us\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creatrix.us\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creatrix.us\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}