What would be the best way to implement a custom accent color?

[jonschmidt]

Our designer is not crazy about the idea of choosing from a pre-defined palette, and we already have an accent color that we use in every other medium outside of our website. Is it reasonable to be able to implement our own accent color, or is this discouraged for some reason? I was thinking we might be able to do this by choosing a pre-defined accent color that closes matches ours, and then overriding some tokens.

[vladmoroz]

Hey, this is a great request. We actually plan to release a tool that would allow you to easily create branded color palettes that would seamlessly slot into how Radix Colors works. The public release will be after the holidays.

For now yep, using the closest accent color and overriding the key tokens is the best way to go about it.

we already have an accent color that we use in every other medium outside of our website

Could you share what that looks like? If you are down to try a preview version of the tool, I’ll post it within a couple days here.

[jonschmidt]

I found this tool which does something similar which I am going to use for now, but as this has 11 colors vs 12 to radix, curious what the differences are https://uicolors.app/create

[backuardo]

@vladmoroz I'd love to try out the preview of the branded color palette tool!

[dclark27]

@vladmoroz would also be down to try a preview of the tool! we are going through a transition from shadcn to radix-themes because of the awesome figma resource you all have. the only piece missing is allowing us to define a palette to match our brand guidelines.

[jonschmidt]

Going to humbly ping this in the hopes that the tool sees the light of day in the future. We are very grateful for work on this library in general, and the time it saves us. Being able to use custom colors would boost this tremendously, as coming up with a suitable palette has not proved that easy. thanks 🙏

[vladmoroz]

Going to humbly ping this in the hopes that the tool sees the light of day in the future. We are very grateful for work on this library in general, and the time it saves us. Being able to use custom colors would boost this tremendously, as coming up with a suitable palette has not proved that easy. thanks 🙏

Good timing, we just released this!
https://twitter.com/radix_ui/status/1771587676019269662

[vladmoroz]

It’s out 🫡
https://twitter.com/radix_ui/status/1771587676019269662

Let us know what you think

[jonschmidt]

First impressions are that I really like the way it showcases the changes as you make them. However I am running into an immediate problem as I do not know what to pick for gray + surface. Most of our surfaces are flat white, so my instinct is to go with that, however gray, I have no idea.
As I mentioned above, our brand color is #79DBC0. The Closest radix color seems to be mint by my calculations. Mint uses "sage" as the gray according to the docs, but I am unsure what that maps to. Sage-9 is #868e8b according to the radix css, but selecting that gets me to this unusable palette.
So I guess some more guidance on how to pick a good gray would be a good things to know

[vladmoroz]

I think you want to switch from dark mode to light mode first, you seem to be using an #FFF background for dark mode palette

As I mentioned above, our brand color is #79DBC0. The Closest radix color seems to be mint by my calculations. Mint uses "sage" as the gray according to the docs, but I am unsure what that maps to. Sage-9 is #868e8b according to the radix css, but selecting that gets me to this unusable palette.

You don't have to use the generated gray color if you are happy with the default grays. Just copy the accent color definitions. If you use white background in light mode, no need to override that too.

[jonschmidt]

Ah of course. The dark mode vs light mode problem did not occur to me. Thanks for the tips!

…

On Mon, Mar 25, 2024 at 9:45 PM Vlad Moroz ***@***.***> wrote: I think you want to switch from dark mode to light mode first, you seem to be using an #FFF background for dark mode palette As I mentioned above, our brand color is #79DBC0. The Closest radix color seems to be mint by my calculations. Mint uses "sage" as the gray according to the docs, but I am unsure what that maps to. Sage-9 is #868e8b according to the radix css, but selecting that gets me to this unusable palette. You don't have to use the generated gray color if you are happy with the default grays. Just copy the accent color definitions. If you use white background in light mode, no need to override that too. — Reply to this email directly, view it on GitHub <#206 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAD5JNSL5JLFZJ3ECQG5BWLY2CEGFAVCNFSM6AAAAABBBNUB3KVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DSMBXGYZTE> . You are receiving this because you authored the thread.Message ID: ***@***.***>