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.
Workspace loading
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
Design gradients visually and copy production CSS.
Create numbered tints and shades from one base color.
Color tools
Create numbered tints and shades from one base color.
Measure text contrast against WCAG thresholds.
Color tools
Measure text contrast against WCAG thresholds.
Color Value Converter
Build a color system, then see it in context.
5 colors generated. Click a swatch to copy its HEX value or use the lock control to preserve it when randomizing.
See the palette in use
WORKSPACE
Buttons, badges, surfaces, and type reveal whether a palette works beyond the swatch.