Worked palette example
One visible color can be represented in different numerical formats.
Colors here are examples, not an automatic accessibility certificate. Test every foreground/background pair before using these values for text.
Open this example in the eight-role Theme Studio →HEX encodes red, green and blue channels
Six-digit HEX writes each color channel as two hexadecimal digits. #EE4800 means red 238, green 72 and blue 0. Three-digit shorthand, such as #F80, repeats each digit to become #FF8800. CSS also supports eight-digit HEX for alpha, where the last pair describes opacity. Make sure your selected tool supports the exact format you are pasting.
RGB makes channel values explicit
The same orange can be written rgb(238, 72, 0). This format is helpful when working with pixel data returned by browser Canvas APIs or with programmatic image analysis. RGBA adds an alpha channel, making semi-transparent overlays possible. The opacity channel does not change the raw RGB channel values, but it changes what the visitor sees on a background.
HSL describes a color wheel
HSL stands for hue, saturation and lightness. Hue is an angle around the color wheel, saturation controls intensity, and lightness runs from black through an intermediate color to white. Designers often find it more intuitive to make harmonious variations by adjusting hue angles than by editing individual red, green and blue byte values.
HSV helps with picker interfaces
HSV (hue, saturation, value) is common in visual pickers because its value dimension can make a brightness slider feel intuitive. HSV and HSL represent similar ideas with different definitions, so their numeric saturation and brightness values are not interchangeable. Two tools may display different-looking numbers without disagreeing about the rendered RGB color.
CMYK is approximate in a browser-based picker
CMYK models cyan, magenta, yellow and key black ink proportions. A mathematical RGB-to-CMYK calculation is only a rough display conversion; professional print output also depends on printer profiles, paper and ink. Treat browser CMYK values as a quick reference, not as proof of print color accuracy.
Before you ship
Compare the colors against the actual design, verify small text and form states with the Contrast Checker, and export named tokens so future edits remain consistent. There is no palette that automatically makes every interface accessible.
Try it with real colors.
Explore a harmonious palette and see what your choices do in an interface.
Open color studio