HomeMga toolAccessible palette generator
Accessible color palette generator mula sa isang brand color
Ilagay ang brand color at kumuha ng sampung-step na scale mula 50 hanggang 900, na binuo sa perceptual na OKLCH space. Ipinapakita ng bawat step ang contrast nito sa puti at itim na text, inililista ng palette ang mga pares ng step na pumapasa sa WCAG AA, at maaaring i-export ang resulta bilang CSS custom properties, Tailwind colors o design tokens.
—
| Token | Kulay | OKLCH | Puting text | Itim na text | APCA Lc P / I |
|---|
Mga pares ng text at background na pumapasa sa AA (4.5:1)
Background step → mga step ng parehong palette na maaaring gamitin bilang text sa ibabaw nito.
Paraan. Pantay na ipinamahagi ang mga step sa OKLCH lightness sa pagitan ng brand color at mga dulo ng scale (L ≈ 97.5 % para 50, ≈ 25 % para 900); hindi nagbabago ang hue, nababawasan ang chroma tungo sa puti, at ang mga kulay na out of gamut ay nababawasan ng chroma hanggang umakma sa sRGB. Contrast: WCAG 2.2 ratio, hindi ni-round up.
Kinakalkula ang lahat sa inyong browser — hindi ipinapadala kahit saan ang inyong inilagay.
Paano gamitin
- Ilagay ang brand colorI-paste ang HEX mula sa brand guide o pumili gamit ang picker. Hinahanap ng generator ang step na tugma sa lightness at bumubuo ng mas maliwanag na tint sa itaas at mas madilim na shade sa ibaba.
- Suriin ang contrast tableIpinapakita ng bawat step ang ratio sa puti at itim na text. Ang “AA” ay 4.5:1 para normal na text; ang “Large” ay 3:1 only para large text at UI components.
- Pumili ng pares ng text at backgroundIpinapakita ng listahan ng pares kung aling step ang maaaring gamitin bilang text sa bawat background — halimbawa, 700 text sa 50 background para info banner.
- I-exportPumili ng CSS variables, Tailwind config, JSON o W3C design tokens, pangalanan ang palette at kopyahin ang code sa inyong project.
Bakit bumuo ng tint at shade sa OKLCH
Ang pinakasimpleng paraan para gawing mas maliwanag o mas madilim ang kulay ay ihalo sa puti o itim sa sRGB, o baguhin ang L sa HSL. Parehong nagbubunga ng hindi pantay na scale. Ang HSL lightness ay hindi perceptual: ang yellow sa 50 % ay mukhang mas maliwanag kaysa blue sa 50 %, kaya ang “parehong” step ay may ibang contrast depende sa hue. Ang paghahalo sa puti sa sRGB ay nagbabago ng hue — ang blue ay nauuwi sa purple, ang red sa pink.
Ang OKLCH, cylindrical na anyo ng OKLab color space na inilathala ni Björn Ottosson noong 2020 at bahagi ngayon ng CSS Color Level 4, ay naghihiwalay sa tatlong bagay na mahalaga sa design:
Dahil sinusundan ng L kung gaano maliwanag ang hitsura ng kulay, ang pantay na step sa L ay nagbibigay ng scale na mukhang pantay sa anumang hue, at ang contrast sa puti o itim ay nagbabago nang predictable. Dahil dito, ang Tailwind CSS v4 ay gumagamit ng OKLCH para sa default palette.
Paano binubuo ng generator ang scale
- Ang brand color ay kino-convert sa OKLCH at inilalagay sa step na may pinakamalapit na reference lightness (o sa step na inyong pinili). Nananatiling eksakto ang HEX nito.
- Ang mas maliwanag na step ay pantay sa L sa pagitan ng brand color at L ≈ 97.5 % (step 50); ang mas madilim ay sa pagitan ng brand color at L ≈ 25 % (step 900).
- Hindi nagbabago ang hue. Nababawasan ang chroma tungo sa maliwanag na dulo — ang napakaliwanag na tint na may buong chroma ay mukhang neon — at nababawasan nang hanggang ikatlo tungo sa madilim na dulo.
- Ang kulay na nasa labas ng sRGB gamut ay ibinabalik sa pagbawas ng chroma habang pinapanatili ang L at H, ayon sa CSS Color 4.
- Ang bawat HEX ay ni-round sa 8 bit bawat channel, at ang contrast ay kinakalkula mula sa rounded na value na talagang gagamitin.
Paano basahin ang mga contrast column
Para bawat step, ipinapakita ng table ang WCAG 2.2 contrast ratio sa puting (#fff) at itim na (#000) text:
- AA — hindi bababa sa 4.5:1: ligtas para body text, label at link.
- Large — sa pagitan ng 3:1 at 4.5:1: para text mula 24px (18.66px bold) at non-text element gaya ng icon, border at focus ring only (WCAG 1.4.11).
- Hindi — mas mababa sa 3:1: dekorasyon only, hindi para text.
Dahil sinusundan ng mga step ang perceptual lightness, magkatulad ang resulta para maraming hue: ang puting text ay pumapasa sa AA sa 600–900 at ang itim na text sa 50–500. Halos walang kulay na pumapasa sa dalawa: ang 4.5:1 laban sa puti at itim nang sabay ay posible only sa napakakitid na range ng relative luminance (0.175–0.183). Dahil dito, gumagamit ang design systems ng 600 o 700 para primary button na may puting label, at iniiwan ang 400–500 para fill, chart at large text.
Ipinapakita ng APCA column ang lightness contrast (Lc) mula sa draft ng WCAG 3 para puti at itim na text. Mahigit 75 ay komportable para body text, mahigit 60 para UI label, mahigit 45 para heading. Ang APCA ay hindi pa standard; gamitin para pumili sa pagitan ng mga opsyong pumapasa sa WCAG 2.2.
Mga pares sa loob ng palette
Ang mga tinted na interface — info banner, selected row, tag, onboarding hint — ay naglalagay ng madilim na step sa maliwanag na step ng parehong hue. Ipinapakita ng listahan, para bawat background, kung aling text step ang umaabot sa 4.5:1. Rule of thumb: ang mga step na limang puwesto o higit ang layo (50 at 600, 100 at 700) ay karaniwang pumapasa; ang magkatabi ay hindi kailanman.
Paano gamitin ang palette sa design system
- Pangalanan ayon sa role, hindi value. I-export ang scale bilang
--brand-50 … --brand-900, at i-map ang mga role sa ibabaw:--color-primary: var(--brand-600),--color-primary-text: var(--brand-700),--color-info-bg: var(--brand-50). Kung magbago ang brand, isang listahan only ang binabago. - Isulat ang mga aprubadong pares. Idokumento kung aling text step ay para aling background, para walang nagmamadaling maglagay ng 400 text sa 100.
- Ang dark theme ay hiwalay na mapping. Gamitin ang parehong scale nang baligtad — maliwanag na step para text, madilim para surface — at suriin muli ang mga pares: ang madilim na pares na pumapasa sa WCAG 2 ay maaari pa na mukhang malabo, na mas mahusay na ipinapakita ng APCA.
- Ang mga state ay nangangailangan din ng contrast. Ang hover at pressed ay karaniwang isang step na mas madilim; ang focus ring ay nangangailangan ng 3:1 laban sa nakapaligid na background.
- Ang semantic colors (success, warning, danger) ay maaaring buuin sa parehong paraan mula sa sariling base color. Ang yellow at light green ay nakikilala only sa maliwanag na step, kung saan hindi pumapasa ang puting text — gumamit ng madilim na text sa ibabaw ng mga ito.
Para suriin ang isang pares, kasama ang kulay sa labas ng palette o semi-transparent na overlay, gamitin ang color contrast checker.
Mga sanggunian
- Ottosson B. A perceptual color space for image processing, 2020 — OKLab at OKLCH, mga conversion matrix.
- W3C. CSS Color Module Level 4 — oklch() notation at gamut mapping sa pagbawas ng chroma.
- W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — success criteria 1.4.3, 1.4.6 at 1.4.11, relative luminance at contrast ratio.
- Somers A. APCA — Accessible Perceptual Contrast Algorithm, apca-w3 0.0.98G-4g — mga Lc value.
- W3C Design Tokens Community Group. Design Tokens Format Module, draft — $type at $value na istruktura sa tokens export.
Mga madalas na tanong
Ano ang kahulugan ng mga numerong 50 hanggang 900 sa palette?
Ang mga ito ay lightness step ng isang hue, pinasikat ng Material Design at Tailwind CSS: ang 50 ay pinakamaliwanag na tint, ang 900 ay pinakamadilim na shade, at ang 500 o 600 ay karaniwang malapit sa brand color. Ang mga numero ay pangalan, hindi sukat, kaya maaaring i-adjust ang anumang step.
Bakit OKLCH sa halip ng HSL para bumuo ng shade?
Ang OKLCH lightness ay tumutugma sa perceived brightness, ang HSL lightness ay hindi: ang yellow at blue na parehong HSL lightness ay mukhang lubhang magkaiba at may magkaibang contrast. Ang pantay na OKLCH step ay nagbibigay ng pantay na scale sa anumang hue nang walang hue shift.
Aling step ng palette para text sa puti?
Ang unang step na hindi bababa sa 4.5:1 laban sa puti sa table. Sa mga palette mula sa generator na ito, karaniwang 600, dahil sinusundan ng mga step ang perceptual lightness; sa mga palette na batay sa HSL, ang yellow, lime at cyan ay kadalasang nangangailangan ng 800 o mas madilim. Para large text at icon, sapat ang 3:1, kaya maaaring gumana ang isang step na mas maliwanag.
Bakit walang step na pumapasa sa puti at itim na text?
Para umabot sa 4.5:1 laban sa puti at itim nang sabay, kailangan ang relative luminance sa pagitan ng 0.175 at 0.183 — range na napakakitid na halos walang step na nasa loob nito. Normal ito: gumamit ng puting text sa madilim na step at madilim na text sa maliwanag.
Nasa palette ba ang eksaktong brand color?
Oo. Pinapanatili ng brand color ang eksaktong HEX sa step kung saan pinakaangkop ang lightness nito, o sa step na inyong pinili, at ang iba pang step ay binubuo sa paligid nito.
Paano gamitin ang export sa Tailwind CSS?
Para Tailwind v3, i-paste ang Tailwind export sa theme.extend.colors sa tailwind.config.js at gumamit ng class gaya ng bg-brand-600. Para Tailwind v4, i-export ang CSS variables at palitan ang pangalan tungo sa --color-brand-600 sa loob ng @theme block.
Higit pa sa Product design
- Color contrast checker
Pumapasa ba sa WCAG AA o AAA ang pares ng kulay ng text at background?
- Type scale generator
Aling mga font size ang bumubuo ng magkakatugma at fluid na type scale?
- Tooltip at tour reading time
May sapat bang oras ang user para basahin ang tooltip o tour step?
- Tooltip copy checker
Maikli, malinaw at nag-uudyok ba ng aksiyon ang tooltip na ito?
- SUS calculator
Ano ang System Usability Scale score, at mahusay ba ang usability?