Palette

Color Palette Generator

Paleti za brand zinazotegemea OKLCH. Chagua msingi, pata kila uhusiano wa kawaida pamoja na kiwango cha toni cha 50–950. Funga, zungusha upya, hamisha kama CSS / Tailwind v4 / SCSS / JSON.

Color Palette Generator — TL;DR

Paleti za brand zinazotegemea OKLCH. Chagua msingi, pata kila uhusiano wa kawaida pamoja na kiwango cha toni cha 50–950. Funga, zungusha upya, hamisha kama CSS / Tailwind v4 / SCSS / JSON.

Color Picker & Converter yetu ni kwa rangi moja kwa wakati — chagua / badilisha / nakili. Zana hii ni kwa paleti: weka rangi ya msingi, pata mfumo mzima ulio tayari kwa brand (uhusiano + kiwango cha toni) kwa mara moja. Ni tofauti kati ya kununua shati moja na kupata kabati zima la nguo.

HSL hupanga hues kwa njia isiyo sawa (njano katika 60° huhisi kuwa angavu zaidi kuliko bluu katika 240° hata kwa thamani ile ile ya mwangaza). Paleti ya triadic katika HSL ina rangi moja inayoonekana wazi kuwa angavu zaidi au yenye kuchoka zaidi kuliko nyingine. OKLCH ni sawa kimaono — rangi tatu katika mwangaza ule ule wa OKLCH zinaonekana zikiwa na mwangaza ule ule. Ndio maana kila mfumo wa kisasa wa muundo (Apple HI, Tailwind v4, IBM Carbon) unahamia OKLCH kwa uhusiano na viwango.

Rangi za brand yako kamwe haziondoki kwenye kifaa chako. Fungua DevTools → Network na utaona maombi sufuri yanayoenda nje wakati wa operesheni yoyote.

Kidokezo: bonyeza Space kuzungusha upya rangi ambazo hazijafungwa.

Kiwango cha toni (50 → 950)
CSS
Tailwind v4
SCSS
JSON

Imejengwa kwa ajili ya mifumo ya muundo, si tu picha nzuri

Uhusiano wa OKLCH, viwango vya toni, funga na zungusha upya, hamisha tokeni za muundo — pamoja na vigusio vidogo vinavyoifanya iwe ya kufurahisha kweli kuitumia.

Uhusiano sita wa OKLCH

Complementary, analogous, triadic, tetradic, split-complementary, monochromatic — vyote vimekokotwa katika OKLCH ili paleti ya triadic ya rangi tatu zilizojaa zibaki na mwangaza sawa. Hakuna utope wa HSL.

Kiwango cha toni cha 50 → 950

Weka rangi yako ya brand, pata kiwango cha toni cha umbo la Tailwind 50, 100, 200, … 900, 950 kinachotengenezwa kwa kutembea mwangaza katika curve ya OKLCH. Chroma hubanwa katika viwango vya juu kabisa ili rangi zibaki ndani ya gamut ya sRGB.

Funga + zungusha upya (mtindo wa Coolors)

Bandika rangi yoyote (ikoni ya kufuli) na bonyeza Re-roll (au bonyeza Space tu) kubadilisha zilizobaki ndani ya uhusiano uliochaguliwa. Rudia haraka, weka unachopenda.

Hamishaji nne za kiwango cha uzalishaji

CSS custom properties (--brand-500), Tailwind v4 @theme block, SCSS map, na JSON design tokens tayari kwa Style Dictionary / Figma Tokens. Pamoja na ukanda wa rangi wa PNG wa 1200×200.

Tofauti ya WCAG kwa mtazamo mmoja

Kila rangi inaonyesha uwiano wake wa tofauti wa WCAG dhidi ya bora kati ya nyeusi au nyeupe, pamoja na beji ya AA / AAA / fail. Tambua matatizo ya ufikivu kabla hayajatumwa.

Faragha kwa muundo

Kila baiti hubaki kwenye kifaa chako. Hesabu za OKLCH, uzalishaji wa uhusiano, upatikanaji wa kiwango, hamishaji ya PNG vyote vinaendeshwa kama JavaScript ndani ya kifaa. Fungua DevTools → Network na uthibitishe maombi sufuri yanayoenda nje.

Jinsi ya kujenga paleti ya brand

Hatua nne kutoka rangi moja ya msingi hadi paleti kamili iliyo tayari kwa tokeni za muundo.

  1. 1

    Weka rangi yako ya msingi ya brand

    Bofya kisanduku cha rangi, bandika HEX, au bonyeza Random base kwa msukumo. Zana huweka kitovu cha paleti nzima kwenye rangi hii — rangi za uhusiano na kiwango cha toni cha hatua 11.

  2. 2

    Chagua uhusiano

    Chaguo-msingi ni Analogous — rangi tatu ndani ya 30° ya msingi, kamili kwa paleti tulivu za brand. Complementary kwa lafudhi za tofauti. Triadic / Tetradic kwa brand za uchapishaji / cha kuchezea. Monochromatic kwa mifumo ya hue moja ya toni. Vyote vimekokotwa katika OKLCH ili vibaki na mwangaza sawa.

  3. 3

    Funga + zungusha upya hadi uridhike

    Bofya ikoni ya kufuli kwenye rangi yoyote unayotaka kuhifadhi, kisha bonyeza Space (au bonyeza Re-roll) kubadilisha zilizobaki ndani ya uhusiano. Rudia haraka. Hariri rangi yoyote moja kwa moja kwa kubofya uwanja wake wa HEX ikiwa unataka kupata thamani halisi.

  4. 4

    Hamisha kama tokeni za muundo

    Nakili matokeo ya CSS (custom properties), Tailwind v4 (@theme block), SCSS map, au JSON design tokens. Au bonyeza Download PNG kwa ukanda wa rangi wa 1200×200 ulio tayari kuwekwa kwenye muhtasari wa muundo.

Imejengwa kwa wabunifu wa brand + timu za mifumo ya muundo

Hali nne za kawaida ambapo zana ya paleti ya OKLCH inayotanguliza faragha hupiga kuhariri misimbo ya hex kwa mkono katika Figma.

Mbio wa utambulisho mpya wa brand

Una rangi ya brand, unahitaji mfumo unaoizunguka. Weka HEX, chagua Analogous, zungusha upya hadi rangi mbili za usaidizi ziimbe, funga zote tatu. Geuza kwenye mwonekano wa Tonal Scale, nakili Tailwind @theme block, bandika kwenye app.css ya mradi mpya. Muda wa jumla: dakika 5.

Kuongeza brand kwenye mradi uliopo wa Tailwind

Tailwind indigo ya kawaida si brand yako. Brand yako ni #5B3FCD. Weka, pata kiwango cha toni cha hatua 11 kinachooanisha kikamilifu na nafasi ya Tailwind. Nakili @theme block — kila bg-brand-500 / text-brand-700 inafanya kazi tu.

Kukagua ufikivu kabla ya kuzindua

Kila rangi inaonyesha uwiano wake wa tofauti wa WCAG + beji ya AA/AAA. Kagua kwa haraka kwamba brand-500 inafikia AA dhidi ya nyeupe, na brand-100 inabaki inayosomeka kama tint ya nyuma na maandishi ya brand-900. Rekebisha rangi zenye matatizo kwa kuzizungusha upya mmoja mmoja.

Mfumo wa muundo wa brand nyingi

Kampuni za matangazo / kampuni za brand nyingi hudumisha mifumo N ya muundo inayofanana, kila moja ikiwa na umbo lile lile lakini hue tofauti ya brand. Tumia mtiririko wa kazi ule ule wa uhusiano + kiwango cha toni kwa kila brand, hamisha kila moja kama JSON tokens, weka kwenye Style Dictionary. Umbo thabiti, utambulisho tofauti.

100% ya faragha — inaendeshwa kwenye kivinjari chako

Rangi za brand yako kamwe haziondoki kwenye kifaa chako. Fungua DevTools → Network na utaona maombi sufuri yanayoenda nje wakati wa operesheni yoyote.

  • Hesabu za OKLCH, uzalishaji wa uhusiano, upatikanaji wa kiwango cha toni, kokoteo la tofauti la WCAG, na hamishaji ya PNG vyote vinaendeshwa kama JavaScript kwenye mashine yako — hakuna uwasilishaji wa upande wa seva, hakuna API ya wahusika wengine.
  • Hamishaji ya PNG inatumia canvas ya ndani; picha ya rangi inazalishwa kabisa katika kumbukumbu ya kivinjari na kupakuliwa kama Blob — hakuna kinachovuka mtandao.
  • Hakuna kuingia, hakuna telemetry kwenye thamani za rangi. Tunatumia tu cookie moja kwa hali ya idhini ya cookie na moja kwa upendeleo wa lugha.

Miongozo inayohusiana

Misomo iliyochaguliwa kwa mkono kuhusu paleti za OKLCH, mifumo ya rangi ya brand, na tokeni za muundo.

Maswali yanayoulizwa mara kwa mara

Tofauti gani kati ya hii na kichagua rangi cha kawaida?

Color Picker & Converter yetu ni kwa rangi moja kwa wakati — chagua / badilisha / nakili. Zana hii ni kwa paleti: weka rangi ya msingi, pata mfumo mzima ulio tayari kwa brand (uhusiano + kiwango cha toni) kwa mara moja. Ni tofauti kati ya kununua shati moja na kupata kabati zima la nguo.

Kwa nini OKLCH na si HSL?

HSL hupanga hues kwa njia isiyo sawa (njano katika 60° huhisi kuwa angavu zaidi kuliko bluu katika 240° hata kwa thamani ile ile ya mwangaza). Paleti ya triadic katika HSL ina rangi moja inayoonekana wazi kuwa angavu zaidi au yenye kuchoka zaidi kuliko nyingine. OKLCH ni sawa kimaono — rangi tatu katika mwangaza ule ule wa OKLCH zinaonekana zikiwa na mwangaza ule ule. Ndio maana kila mfumo wa kisasa wa muundo (Apple HI, Tailwind v4, IBM Carbon) unahamia OKLCH kwa uhusiano na viwango.

'Tonal scale (50 → 950)' inamaanisha nini?

Ni kiwango cha rangi ya brand cha mtindo wa Tailwind: indigo-50 (nyepesi zaidi), indigo-100, indigo-200, … indigo-900, indigo-950 (nyeusi zaidi). Weka rangi yako ya brand na zana itazalisha hatua zote 11 kiotomatiki kwa kutembea mwangaza wa OKLCH katika curve maalum. Matokeo ni mbadala wa moja kwa moja kwa tokeni yoyote ya paleti ya Tailwind, katika hue ya brand yako.

Ninafungaje rangi na kuzungusha upya nyingine tu?

Bofya ikoni ya kufuli juu kushoto ya rangi yoyote — itabaki mahali. Kisha bonyeza Re-roll au bonyeza Space kubadilisha kila rangi ambayo haijafungwa ndani ya uhusiano uliochaguliwa. Hivi ndivyo unavyopata paleti nzuri: bandika rangi ya brand uliyokwishaichagua, chunguza tofauti karibu nayo.

Je, kuna chochote kinachotumwa kwenye seva yako?

Hapana. Hesabu za OKLCH, uzalishaji wa uhusiano, upatikanaji wa kiwango cha toni, kokoteo la uwiano wa tofauti, hamishaji ya PNG, kila nakala ya clipboard — vyote vinaendeshwa katika JavaScript kwenye kifaa chako. Fungua DevTools → Network na utaona maombi sufuri yanayoenda nje. Bandika rangi za brand yako, tokeni za muundo za ndani, paleti zilizofungwa kwa NDA — hakuna kinachoondoka kwenye laptop yako.