Használata
- Adjon meg egy alapszínt, vagy válasszon egyet. Az „Új véletlen alapszín” kiválaszt egyet Önnek.
- Válasszon egy harmóniát. Az „Árnyalatok és tónusok” 11 lépésből álló skálát hoz létre a nagyon világostól a nagyon sötétig.
- Zárolja a megtartani kívánt színt, majd fedezzen fel további alapszíneket.
- Válassza a HEX, a CSS egyéni tulajdonságok vagy a JSON lehetőséget, adjon meg egy nevet, és másolja ki a kódot.
Hogyan működik
A harmóniákat a színárnyalat körön való elforgatásával találjuk meg: a komplementer az ellentétes árnyalatot adja hozzá (180°), az analóg a szomszédokat 30° és 60° távolságra mindkét oldalon, a triád három árnyalatot használ 120°-ra egymástól, a tetrád négy árnyalatot 90°-ra, a split-komplementer pedig a komplementer melletti két árnyalatot (150° és 210°).
Az elforgatás OKLCH-ben történik, nem HSL-ben. Az OKLCH egyenletesen tartja az érzékelt világosságot, így egy sárga és egy kék ugyanabban a palettán hasonló fényerejűnek tűnik, nem pedig a sárga vakít. Ha egy elforgatott szín kívül esne azon, amit az sRGB képernyők meg tudnak jeleníteni, a krómáját addig csökkentjük, amíg bele nem fér, megtartva a világosságot és az árnyalatot.
Az árnyalat- és tónusskála rögzített OKLCH világossági lépéseket használ 50-től 950-ig elnevezve, hasonlóan a Tailwind CSS által használt elnevezéshez, a krómát csökkentve a fehérhez és feketéhez közel, hogy a legvilágosabb tónusok ne tűnjenek neonszerűnek. A harmóniák csak kiindulópontot jelentenek: ellenőrizze a szöveg- és háttérpárokat kontrasztellenőrzővel, mielőtt tartalomhoz használná őket.
Példák
Márkaszín kiemelő színnel
A #3366cc alaphoz a „Komplementer” hozzáadja a #8c6500-at, egy meleg okkersárgát azonos OKLCH világossággal. A kék és narancssárga párosítás gyakori választás kiemeléshez egy kék márkánál.
Design tokenek egy komponenskönyvtárhoz
Válassza az „Árnyalatok és tónusok” lehetőséget, állítsa a nevet „primary”-ra, és exportálja a CSS-változókat. Így kap --primary-50-től --primary-950-ig tartó változókat, készen állnak háttérhez (50–100), szegélyekhez (200–300) és szöveghez (700–900).
Egy szín rögzítése felfedezés közben
Rögzítse a triadikus paletta második színét, majd próbáljon ki különböző alapszíneket. A rögzített színminta megtartja a HEX értékét, miközben a többi változik.
Gyakori kérdések
Miért térnek el a színeim egy HSL színkerék-eszköztől?
Ez az eszköz az OKLCH színtérben forgatja a színezetet, amely egy percepciós színtér. A színezeti szögek nem pontosan igazodnak a HSL-hez, ezért egy szín „ellentétes” párja kissé más árnyalat lehet, mint amit egy HSL-alapú eszköz ad.
Használhatom a JSON-t a Tailwind CSS-ben?
A JSON neveket rendel HEX-értékekhez, ugyanabban a formátumban, amelyet a Tailwind CSS egy színhez elfogad a témakonfigurációjában. A Tailwind 4-ben a CSS-változókat is beillesztheti egy @theme blokkba, miután átnevezte őket --color-… nevekre.
A generált paletták akadálymentesek?
Nem automatikusan. A színharmónia önmagában nem mond semmit a szöveg és a háttér közötti kontrasztról. Minden használni kívánt párost ellenőrizzen a Kontrasztellenőrzővel.
Adatvédelem
A paletták a böngészőjében készülnek. A színeit nem küldjük el sehová, és nem tároljuk.