HEX / RGB / HSL Converter
Convert colours between HEX, RGB and HSL.
Color & Design
Convert colours, build palettes & shades.
Shades & Tints Generator
Generate shade and tint ramps from one colour.
CSS clamp() Fluid Type
Build a fluid CSS clamp() value for type and spacing.
Glassmorphism CSS Generator
Design a frosted-glass effect and copy the CSS.
Accessible Color Pair Finder
Check WCAG contrast and fix failing pairs.
Analogous Color Scheme
Build harmonious analogous palettes from one colour.
CMYK to RGB Converter
Turn print CMYK ink values into screen RGB and hex.
Color Blindness Simulator
See your colour through colour-blind eyes.
Color Format Converter
Convert between HEX, RGB and HSL instantly.
Color Mixer
Blend two hex colours at any ratio.
Color Tint and Shade Table
Build tint and shade ramps from one base colour.
Complementary Color Finder
Find the opposite colour on the wheel, instantly.
Duotone Generator
Blend two colours into a duotone ramp and CSS gradient.
Gradient Color Stops
Interpolate even color stops between two hex colors.
HSV and HSB Converter
Convert hex and RGB to HSV / HSB values.
Kelvin to RGB Converter
Turn a colour temperature into an sRGB swatch.
Material Design Palette
Build a Material-style 50–900 colour ramp.
Monochromatic Palette
Build a single-hue tints-and-shades palette.
Nearest Named Color
Find the closest CSS colour name to any colour.
Palette Extractor
Pull the dominant colours out of any image.
Random Palette Generator
Generate random colour palettes with harmony schemes.
RGB to CMYK Converter
Turn screen RGB colours into print CMYK values.
Tailwind Palette Generator
Build a 50–950 Tailwind colour scale from one hex.
Tetradic Color Scheme
Generate a four-colour rectangle palette from one hex.
Triadic Color Scheme
Three balanced hues, 120° apart on the wheel.
About Color & Design
Convert colours between HEX, RGB, HSL and other formats, build palettes, generate shade and tint ramps, check WCAG contrast ratios, simulate colour blindness, and produce CSS for gradients and glassmorphism effects — all in the browser. These tools are made for the design–development handoff: pick a brand colour and get its Tailwind-style ramp, verify text passes accessibility contrast before shipping, or extract a palette from an image locally without uploading the artwork. Values update live as you adjust them and every output comes with copy-ready CSS or design-token values.