HEX ↔ RGB
HEX encodes three 8-bit sRGB channels in base 16; RGB shows them as decimal values.
Colour & design8 free tools
Colour & design
Find the right colour, contrast and finishing touches.
Most tool inputs are processed on your device.
8 of 8 tools
HEX ↔ HSL
Converts between 8-bit sRGB and hue, saturation, lightness using channel extrema.
Colour & designRGB ↔ HSL
HSL derives hue from the dominant RGB channel and lightness from the average channel extrema.
Colour & designColour Picker
The native colour picker supplies an sRGB colour; the tool displays HEX, RGB and HSL equivalents.
Colour & designContrast Checker
WCAG 2.x: linearize sRGB at 0.04045, L = 0.2126R + 0.7152G + 0.0722B.
Colour & designGradient Generator
Creates a CSS linear-gradient between two colours at the supplied angle.
Colour & designCSS Box Shadow Generator
CSS box-shadow uses horizontal offset, vertical offset, blur radius, spread radius and colour.
Colour & designBorder Radius Generator
CSS corner order is top-left, top-right, bottom-right, bottom-left.
Colour & designA useful starting point
Colour utilities are most valuable when they connect a visual choice to a usable CSS or accessibility decision. LittleKit keeps colour conversions local and shows the contrast calculation rather than presenting a mysterious pass/fail badge.
Good reasons to use this category
- Converting a colour between HEX, RGB and HSL
- Checking text contrast against WCAG thresholds
- Generating a CSS gradient or box shadow
- Copying a browser-ready value into a stylesheet
Choosing the right operation
Start with the representation your design system already uses. Use the contrast checker for a foreground/background pair, then test the actual font size and weight in context. A mathematically valid colour value can still be a poor interface choice.
Know the boundary
Contrast ratios describe relative luminance for the selected colours; they do not replace testing focus, disabled states, images, motion or the surrounding layout. Colour perception and display calibration vary, so review the result on the target device.