Do narzędzia
OKLCH Studio

Checker kontrastu kolorów, który zachowuje odcień marki

Inne narzędzia tylko mierzą. Fix przesuwa jasność tekstu do AA bez driftu odcienia. Picker OKLCH i lokalna paleta ze zdjęcia.

Full studio here. Need pairs, names, or brand-from-URL? Colorise Pro. · About

Pick
Photo
Read

Przepływ

  1. 01

    Kontrast

    Fix AA.

  2. 02

    OKLCH

    Picker.

  3. 03

    Zdjęcie

    Lokalnie.

Checker kontrastu kolorów, który sam poprawia kolor

Większość narzędzi tylko mierzy. Tu masz WCAG 2.1 i APCA, a Fix przesuwa jasność tekstu do AA bez zmiany odcienia. Picker OKLCH i paleta ze zdjęcia lokalnie.

Najpierw Fix

Kontrast, tekst i tło, potem Fix z podglądem przed/po.

Otwórz Fix kontrastu →

Picker OKLCH

Płaszczyzna L×C, export do Tailwind v4 i oklch().

Picker OKLCH →

Tailwind i nazwy CSS

Angielskie strony referencyjne z oklch(), parami WCAG i linkami do Fix.

Paleta Tailwind (EN) →Nazwy CSS (EN) →Fix kontrastu →

Kiedy

Słaby kontrast UI, tokeny Tailwind v4, paleta ze screenshota.

Błędy

Poprawianie kontrastu obrotem odcienia zamiast jasności OKLCH.

CSS po Fix

Zmienne lub @theme.

:root { --text: oklch(0.35 0.08 250); }

Selektor kolorów OKLCH: OKLCH vs HSL vs HEX

HEX stores a display color. HSL is convenient but not perceptual. OKLCH separates lightness, chroma, and hue the way your eye expects — better for scales, contrast Fix, and UI tokens.

SpaceBest forWatch out
OKLCHScales, accessible pairs, CSS oklch()Wide-gamut colors may need clip to sRGB
HSLQuick hue spins in familiar UIsLightness shifts often change perceived hue
HEXCopy-paste into any design toolNo structure — hard to build systems

FAQ

Co wyróżnia checker?

Fix trzyma odcień/chromę do WCAG AA.

Tailwind?

/en/tailwind z linkami ?fg=&bg=.

Udostępnianie?

Copy link w Kontrast.