It’s not a stupid question at all. But @hauleth is right, there are very strong solutions in the mainstream language ecosystems so there is no benefit to them. And being Elixir-only for us means we can benefit from the BEAM more too.
kip
ex_cldr Core Team
kip
ex_cldr Core Team
I’ve just published color version 0.5.0 which introduces Color.Palette that provides several palette-generation algorithms:
tonal/2— a single tonal scale (Tailwind / Radix / Open Color style) — one seed colour, N shades from light to dark, useful forbg-primary-50throughbg-primary-950design tokens.theme/2— a complete Material Design 3 style theme from one seed: five coordinated tonal scales (primary, secondary, tertiary, neutral, neutral-variant), addressable by Material role names like:on_primaryor:surface_variant.contrast/2— a contrast-targeted palette (Adobe Leonardo style) — shades that hit specific WCAG or APCA contrast ratios against a chosen background. Use this when you need accessibility-guaranteed component states.
And what good would that be without some visualisation tool? So included in Color.Palette.Visualizer that is an opt-in web-based visualizer for the palettes produced by Color.Palette.
This module is a Plug.Router that can be mounted inside a Phoenix or Plug application, or run standalone during development via Color.Palette.Visualizer.Standalone.
Standalone visualizer
For standalone, just do
iex> Color.Palette.Visualizer.Standalone.start(port: 4001)
# Visit http://localhost:4001
Screenshot examples
Here are a couple of screenshots so you can see what you get for each of the algorithms:
Tonal
Contrast
Theme
PS:
We have a new logo too, generated using Color.Palette. There’s a backstory in the Pallete Guide
7
tcoopman
. Awesome, looking forward to trying out some of these features!
frankdugan3
This is an absolutely fantastic feature!
Would you consider changing the type of the seed input to type="color"?
I’m using Color in a library that will provide a framework-agnostic DSL for creating a Design spec and component definitions, leveraging DTCG tokens. It would be really cool if the palette could support exporting a token file for colors as well. Importing may be a little out of scope, and I’m pretty sure using the Palette in library mode would let me do what I need to do for starting up a custom palette.
0
kip
ex_cldr Core Team
I don’t even know what a DTCG token is - but thats a big part of why write software, it’s how I learn. I’ll do some research (thanks for the link), and perhaps you could open a discussion on the repo so we can collaborate on what you’re after. More than happy to give it a go!
0
frankdugan3
Yeah, I’ve only recently learned myself after researching existing solutions for portable designs. Adobe Leonardo actually has an example of what I mean. In addition to the JS/CSS exports, it also has Design tokens as an option, which is just a spec-compliant JSON export of the color palette. I’d link directly, but Leonardo doesn’t use friendly params.
Create Theme → Use (tab) → Design tokens (tab)
I will follow up on GitHub after some experimentation if I find Color is missing something I need. 
0
kip
ex_cldr Core Team
Well, I couldn’t help myself. I looked at the spec and realised this is exactly the kind of thing LLMs are good at. So I turned Claude loose and now on the main branch we have DTCG support. Input the seed via Color-picker or text (text because not all colours can be represented in the picker).
And … an export DTCG section too! If you’re willing to take it for a spin from Github first, provide any feedback or suggestions and I’ll publish to hex when you’re ok with what it’s doing. And I enabled discussions on the repo now (sorry about that).
Updated screenshots
Tonal
Theme
1
woylie
kip
ex_cldr Core Team
Did you come across this article during your research?
I did not. I looked at the ones below. But I will definitely read that one too. Thanks for the link.
- Google (2021). Material Design 3: Color system. The source of the role tokens.
- Stefanov, L. (2022). Radix Colors. Detailed write-up on hue drift, chroma at the extremes, and designer-curated tone curves.
- Adobe (2021). Leonardo. The original contrast-targeted palette generator.
- Somers, A. (2024). APCA contrast. Perception-based contrast metric.
1
kip
ex_cldr Core Team
Interesting, so a quick scan so far suggests that making the contrast between stops a structural invariant of the scale is kind of a hybrid between the current Tonal and Contrast models in color. Definitely worth pursuing. I’m on it!
1