Every Notation CSS Accepts
HEX, RGB, HSL, HWB, OKLCH, OKLab, Lab, LCH, Display P3 and the 148 named colours, each with a copy button. Out-of-gamut values are flagged and fitted by reducing chroma in OKLCH, the way the specification says.
Color Toolkit
Picker, converter, palettes, contrast and colour vision
Seven colour jobs, one colour bar, every figure computed here
Web Tool
Official product page
Publisher:
POLPROG
Official product page
7
Panels
7
Harmonies
11
Scale steps
0
Bytes uploaded
01/Color Toolkit
About
Seven panels over one shared colour: pick and convert, check contrast, build a palette, build a scale, build a gradient, pull a palette out of an image, and see the whole thing through three kinds of colour vision. Change the colour in one panel and every other panel is already talking about it.
The conversions follow CSS Color Level 4, including the real piecewise sRGB transfer curve rather than a gamma of 2.2, the Bradford adaptation between D65 and D50 for Lab, and gamut fitting by reducing chroma in OKLCH. That is why the numbers here agree with what the browser paints instead of being a percent or two off.
What the contrast panel will and will not say
It says the WCAG 2.2 ratio and which requirements the pair meets. It does not say your page is accessible, because contrast is one success criterion out of many - focus order, labels, keyboard paths, motion and structure are all separate - and a page with perfect contrast can still be unusable.
APCA sits behind a disclosure and is labelled as draft information for WCAG 3. It models how contrast reads at a given size and weight, which WCAG 2 does not - but nothing is measured against it today, and showing it as an equal would misrepresent both.
The colour vision panel
The Vienot, Brettel and Mollon projection, applied in linear light. It answers the question worth asking - can these two still be told apart - rather than pretending to photograph what a particular person sees. It is a model of one form of the condition, and the panel says so.
02/Use case
What it solves
The problem
- Colour converters disagree with each other, because most approximate the sRGB transfer curve with a gamma of 2.2
- Rotating a hue in HSL gives three colours that do not look like a set - one comes out visibly darker than the others
- A contrast tool says a pair passes at 4.50:1, and the hex you paste measures 4.49:1 once it is rounded to eight bits
The outcome
- Conversions follow CSS Color Level 4, including the real piecewise sRGB transfer curve, so the numbers match the browser
- Harmonies and scales are built in OKLCH, where equal steps of lightness look like equal steps
- Every contrast suggestion is measured again after rounding to eight bits, so the hex you copy is the hex that passes
Who it is for
- Designers and developers picking colours that have to survive a contrast audit
- Anyone building a design system who needs a tint ramp that reads evenly
- Teams checking whether two states of a control stay distinguishable to colour-blind users
03/Key Features
Key Features
The most important capabilities, explained in practical terms.
WCAG 2.2 Contrast, Said Carefully
The ratio, and which of normal AA, large AA, UI AA, normal AAA and large AAA it meets. Semi-transparent colours are composited over the page colour first, exactly as a browser paints them, which is a mistake most checkers make.
A Suggestion That Actually Passes
When a pair misses the target, the nearest shade of the same colour that reaches it is found by searching lightness and chroma in OKLCH - and every candidate is re-measured after rounding to eight bits, because a search in continuous space can return a colour that fails once it becomes a hex.
Palettes And Scales In OKLCH
Seven harmonies and an eleven-step tint ramp from 50 to 950, built by rotating hue and stepping lightness in a perceptual space. Export as CSS custom properties, SCSS variables, JSON or a plain list.
Gradients Without The Grey Band
Linear, radial and conic gradients with draggable stops, interpolated in OKLCH so blue to yellow does not pass through mud. The plain sRGB form is emitted alongside, so older browsers still draw a gradient.
Palette From An Image
Median cut followed by Lloyd refinement, run on pixels decoded in this tab. The sampling stride is forced off small primes so a striped or tabular image does not alias down to two colours - a real failure that this fixes.
Colour Vision Simulation
The Vienot, Brettel and Mollon projection applied in linear light, for protanopia, deuteranopia and tritanopia. It reports whether a PAIR stays distinguishable, which is the question that matters, and says plainly that it models one form of the condition rather than one person eyes.
APCA, Labelled As A Draft
The perceptual contrast model drafted for WCAG 3 is shown behind a disclosure and described as what it is: draft information, not what anything is measured against today. Presenting it as an equal to the WCAG verdicts would misrepresent both.
04/Download
Product access
A clear path from the official source to your first successful workflow.
Choose the right platform
Use one of the official links available for your device or browser.
Install or open
Follow the store instructions or open the web application. No third-party installers.
Configure and begin
Review the options, choose your preferences and start with the core workflow.
Official access options
05/Technology
Technology behind the product
A transparent look at the core technologies used to build and maintain this product.
JavaScript
06/Security
Privacy & Security
Your data stays on your device. Always.