Color & CSS Style Tools
Convert HEX/RGB/HSL, compute WCAG contrast, and generate controlled gradient and box-shadow CSS entirely in your browser. No uploads.Processed locally · no uploads
Operations
HEX / RGB / HSL colour conversion
Enter an sRGB HEX, rgb()/rgba() or hsl()/hsla() value and get all three formats at once; error tolerances are public and asserted by tests.
WCAG foreground / background contrast
Contrast from sRGB relative luminance; translucent foregrounds are first composited over your chosen opaque background, then normal/large-text AA and AAA verdicts with their premise are shown.
Controlled CSS linear-gradient generator
Accepts only 0/90/180 degrees plus validated colours and integer percentages, serializes linear-gradient() with a fixed grammar; preview and copied text match.
Controlled box-shadow generator (incl. inset)
Build box-shadow from validated integer px values, an inset enum and a colour; inset and outset both preview, and copied text has snapshot plus parse verification.
Real examples and limits
Accepts sRGB HEX (#RGB/#RGBA/#RRGGBB/#RRGGBBAA), rgb()/rgba() and hsl()/hsla() text only; no CSS colour names, Lab/LCH, CMYK or image eyedropper. Gradients are linear at 0/90/180 degrees with 2–5 stops at integer 0..100% positions; shadow offsets/blur/spread are integer px within -100..100 (0..100 for blur). Contrast follows WCAG 2.1 sRGB relative luminance; translucent foregrounds must be composited over a user-selected opaque background first, and results do not cover text on images, gradient backgrounds or translucent overlays. Output is CSS text plus a preview only — no online image editing, no full design suite, no display colour-management validation.
FAQ
Are my colours or documents uploaded?
No. All maths runs in a local pure-ESM module with zero runtime dependencies and zero network requests. Inputs are not persisted by default; analytics is off by default and emits only whitelisted event names and metadata.
Why is a pasted block of raw CSS rejected?
Only validated numbers, enums and colours are accepted and re-serialized by a fixed grammar; raw user CSS is never concatenated into a style attribute. Payloads such as url(), </style>, expression() and @import cannot inject rules or trigger remote requests.
Does a palette share URL leak my document?
No. A share URL carries only lang, tool and up to 5 public, validated hex colour values — never filenames, text, prompts, tokens or private content.
How accurate are the conversions?
Tolerances are recorded in ERROR_TOLERANCE and asserted by tests: RGB channel ≤1/255, hue ≤0.5°, saturation/lightness ≤0.5%, contrast ≤0.01. HEX→RGB→HEX is exact for the fixed vectors.
Can I use sliders and keyboard input on mobile?
Yes. Each numeric parameter offers both a numeric keyboard field and a slider sharing the same validated numeric adapter; results are shown as CSS text and numbers rather than relying on a read-only swatch.