Category documentation
Colour & design: instructions and references
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.
Choosing a tool: 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.
8 tool references, grouped by category. Searches stay in this tab.
Colour & design
Browse category Colour & design
HEX ↔ RGBHEX encodes three 8-bit sRGB channels in base 16; RGB shows them as decimal values.HEX ↔ HSLConverts between 8-bit sRGB and hue, saturation, lightness using channel extrema.RGB ↔ HSLHSL derives hue from the dominant RGB channel and lightness from the average channel extrema.Colour PickerThe native colour picker supplies an sRGB colour; the tool displays HEX, RGB and HSL equivalents.Contrast CheckerWCAG 2.x: linearize sRGB at 0.04045, L = 0.2126R + 0.7152G + 0.0722B.Gradient GeneratorCreates a CSS linear-gradient between two colours at the supplied angle.CSS Box Shadow GeneratorCSS box-shadow uses horizontal offset, vertical offset, blur radius, spread radius and colour.Border Radius GeneratorCSS corner order is top-left, top-right, bottom-right, bottom-left.