Set a product accent
#0f766e
Inspect accessible color values and export the useful token.
Pick one color and copy its HEX, RGB, HSL, or CMYK value.
Inspect one color and copy its HEX, RGB, HSL, or CMYK value for a design token, CSS rule, or handoff.
Enter or pick a HEX color, then copy the representation your target tool expects. Each format describes the same source color differently.
A converted value does not guarantee accessible text or UI. Use the contrast checker against the actual foreground and background pair.
#0f766e
Inspect accessible color values and export the useful token.
Color processing runs in this browser. The active colors and workspace preferences are saved locally.
HEX input, RGB, HSL, OKLCH estimates, WCAG contrast ratios. Conversions start from a HEX color. Color ramps are generated, not copied from Tailwind CSS.
Copy CSS or download CSS, JSON, and SVG palette files where available.
Verify final contrast in the context where the colors will appear.
Design gradients visually and copy production CSS.
CSS tools
Create numbered tints and shades from one base color.
Color tools
Measure text contrast against WCAG thresholds.
Color tools
Build a color system, then see it in context.
See the palette in use
WORKSPACE
Buttons, badges, surfaces, and type reveal whether a palette works beyond the swatch.