Build a product color ramp
#0f766e
Copy numbered light and dark shades for design tokens.
Create numbered tints and shades from one base color. Use it to prepare color values and check how they work together in an interface. Color processing runs in this browser.
Generate and inspect color ramps. The active colors and workspace preferences are saved locally.
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.
#0f766e
Copy numbered light and dark shades for design tokens.
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
Pick one color and copy its HEX, RGB, HSL, or CMYK value.
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.