Editor HCT

Oficiální barevný prostor Google za Material 3: percepčně uniformní úprava Odstín / Chroma / Tón s 13stupňovou Tonal Paletou a odvozením rolí Material 3 – upravte značkovou barvu a sestavte téma jedním krokem.

Základní barva (HEX)

Odstín0

Sytost0

Tón0

000000

Kombinace HCT mimo sRGB jsou mapovány na nejbližší zobrazitelnou barvu.

Otevřít v Board →

Tónová paleta

13 kroků tónu (0-100) při stejném odstínu/sytosti — páteř každého motivu Material 3.

100

Role Material 3

Hodnoty rolí pro světlý režimu odvozené z vaší barvy podle specifikace Material 3.

primarytone 40#5e5e5e

onPrimarytone 100#ffffff

primaryContainertone 90#e2e2e2

onPrimaryContainertone 10#1b1b1b

surfaceTinttone 80#c6c6c6

Tři kroky: zadejte barvu, upravte tři dimenze, přečtěte role.

Oficiální barevný prostor Google Material 3 — Odstín / Sytost / Světlost, percepčně uniformní s předvídatelným kontrastem.

01
Zadejte základní barvu
Vložte HEX a posuvníky HCT se automaticky nastaví; barvu můžete také přenést z editoru palety nebo libovolné stránky s barevným profilem.
02
Upravte Odstín / Sytost / Světlost
Odstín H se pohybuje v rozsahu 0–360, Sytost C nastavuje živost a Světlost T 0–100 přímo odpovídá škále motivu Material; kombinace mimo gamut jsou mapovány na nejbližší zobrazitelnou barvu.
03
Přečtěte tonální paletu a role
13stupňová tonální paleta je kostrou každého motivu Material 3 a panel rolí uvádí doporučení pro primární / primárníContainer ton připravená ke zkopírování.

HCT Nejčastější dotazy

Často kladené otázky o HCT a paletách Material 3.

Jak se HCT liší od OKLCH?: Oba se snaží o percepční uniformitu, ale HCT je postaven na modelu barevného vzhledu CAM16, který také zohledňuje podmínky pozorování a chromatickou adaptaci. Je to oficiální barevný prostor systému motivů Google Material 3 — palety z nástrojů Material přesně odpovídají HCT.
Proč odstín místo procenta světlosti?: Odstín 0–100 se zhruba lineárně mapuje na relativní svítivost (Y) a specifikace Material definuje role podle odstínu: primární=40, plocha=98 atd. – výběr podle odstínu vám umožní předem předvídat kontrast textu.
Proč přesně 13 kroků v Tonal Palette?: 0/10/20 ... 100 je oficiální hodnotová stupnice Material 3, pokrývající celý rozsah od černé po bílou. Pevná stupnice udržuje témata strukturálně identická napříč různými zdrojovými barvami, takže je lze přímo zaměnit.

Po úpravě

Přeneste barvu do editoru palety pro vytvoření palety nebo ji doladěte v editoru OKLCH ve stejném percepčním duchu.

Editor OKLCH

Upravte L / C / H v percepčně uniformním prostoru OKLCH s živým náhledem a výstupem oklch() / HEX / RGB.

Sémantická paleta pro UI

Zadejte jednu značkovou barvu a získejte primární / sekundární / úspěch / varování / nebezpečí – export jako konfigurace Tailwind a CSS proměnné.

Kontrola kontrastu

Ověření kontrastu podle WCAG 2.1 mezi libovolnou barvou popředí a pozadí.

Tři kroky: zadejte barvu, upravte tři dimenze, přečtěte role.

Oficiální barevný prostor Google Material 3 — Odstín / Sytost / Světlost, percepčně uniformní s předvídatelným kontrastem.

Zadejte základní barvu

Vložte HEX a posuvníky HCT se automaticky nastaví; barvu můžete také přenést z editoru palety nebo libovolné stránky s barevným profilem.

Upravte Odstín / Sytost / Světlost

Odstín H se pohybuje v rozsahu 0–360, Sytost C nastavuje živost a Světlost T 0–100 přímo odpovídá škále motivu Material; kombinace mimo gamut jsou mapovány na nejbližší zobrazitelnou barvu.

Přečtěte tonální paletu a role

13stupňová tonální paleta je kostrou každého motivu Material 3 a panel rolí uvádí doporučení pro primární / primárníContainer ton připravená ke zkopírování.

HCT Nejčastější dotazy

Často kladené otázky o HCT a paletách Material 3.

Jak se HCT liší od OKLCH?

Oba se snaží o percepční uniformitu, ale HCT je postaven na modelu barevného vzhledu CAM16, který také zohledňuje podmínky pozorování a chromatickou adaptaci. Je to oficiální barevný prostor systému motivů Google Material 3 — palety z nástrojů Material přesně odpovídají HCT.

Proč odstín místo procenta světlosti?

Odstín 0–100 se zhruba lineárně mapuje na relativní svítivost (Y) a specifikace Material definuje role podle odstínu: primární=40, plocha=98 atd. – výběr podle odstínu vám umožní předem předvídat kontrast textu.

Proč přesně 13 kroků v Tonal Palette?

0/10/20 ... 100 je oficiální hodnotová stupnice Material 3, pokrývající celý rozsah od černé po bílou. Pevná stupnice udržuje témata strukturálně identická napříč různými zdrojovými barvami, takže je lze přímo zaměnit.