Loadingβ¦
Loadingβ¦
Colors, layouts, and design helpers.
Colour
Pick any colour with a saturation/brightness square, from anywhere on your screen (EyeDropper), or from a photo β and get it in HEX, RGB, HSL, OKLCH and more.
Open tool βColour
Convert any colour between HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab and OKLCH, with the nearest CSS colour name.
Open tool βPalettes
Build a palette from one colour β a 50β950 shade scale or complementary, analogous, triadic and other harmonies, worked out in OKLCH β and export CSS, Tailwind, SCSS or JSON.
Open tool βColour
Pull the main colours out of a photo or logo, with how much of the image each covers, and export them as CSS variables or JSON.
Open tool βAccessibility
Check text and background colours against WCAG 2.2 AA and AAA, see the exact contrast ratio, and get the closest colour that passes.
Open tool βCSS
Design linear, radial and conic CSS gradients with any number of colour stops and vivid OKLCH blending, and copy the CSS.
Open tool βCSS
Layer soft, hard, inset and glowing box-shadows with a live preview, and copy the CSS.
Open tool βCSS
Round each corner separately, make pills, circles and organic blobs with elliptical radii, and copy the shortest border-radius CSS.
Open tool βCSS
Style a button β colours, padding, radius, border, shadow β with hover, focus and disabled states included, and a contrast check.
Open tool βCSS
Create frosted-glass cards with backdrop blur, tint, saturation and a subtle border β with a fallback for browsers without backdrop-filter.
Open tool βCSS
Generate soft-UI (neumorphic) shadows β flat, concave, convex or pressed β from one surface colour.
Open tool βType
Try curated Google Fonts pairings (or any two families) on real headings and paragraphs, then copy the embed code and CSS.
Open tool βType
Generate a modular type scale β fixed or fluid with clamp() β from a base size and ratio, as CSS custom properties ready to paste.
Open tool βLayout
Find the aspect ratio of any size, resize while keeping the ratio, and see common ratios like 16:9, 4:3 and 9:16.
Open tool βLayout
Split any length in the golden ratio (Ο β 1.618), scale by powers of Ο, and see the golden rectangle.
Open tool β