Spalvų parinkiklis internetu
Pasirinkite spalvą rate, tiksliai ją sureguliuokite sodrumo ir ryškumo drobėje ir gaukite ją visais formatais, kuriuos naudoja jūsų projektas – nuo #RRGGBB iki oklch(). Šis parinkiklis apima ir tai, ką kiti įrankiai dažnai praleidžia: tris rato geometrijas, įskaitant tradicinį dailininko RYB ratą, harmonijų sluoksnius, kurie patys sukuria paletę, alfa kanalą ir vieno paspaudimo visos paletės eksportą kaip CSS kintamuosius, SCSS ar JSON. Viskas apskaičiuojama vietoje, jūsų naršyklėje.
Trys ratai, ne vienas
Selektorius Rato režimas keičia paties rato geometriją:
- HSV ir HSL yra skaitmeniniai ratai – atspalviai išdėstyti taip, kaip juos maišo RGB ekranai. Jie skiriasi tuo, kaip elgiasi kvadratinė drobė: HSV ryškiausias kampas yra grynas atspalvis, o HSL grynus atspalvius patalpina ties 50 % šviesumo, virš jų – balta.
- RYB (dailininko) išdėsto atspalvius taip, kaip jų mokėsi dailininkai: raudona, geltona ir mėlyna kaip pirminės spalvos, tarp jų – oranžinė, žalia ir violetinė. Jo praktinė nauda matoma harmonijose – RYB rate raudonos priešingybė yra žalia, o mėlynos – oranžinė, klasikinės pigmentų poros, tuo tarpu skaitmeninis ratas raudoną suporuoja su žydra. Jei „papildomos“ paletė iš įprasto parinkiklio kada nors atrodė jums neteisingai, štai kodėl.
Harmonijos, kurios sukuria paletę už jus
Pasirinkite taisyklę po Spalvų harmonija, ir ratas pažymės susijusias spalvas, kurios rodomos kaip parengta paletė:
- Papildoma – viena priešinga spalva. Stipriausias kontrastas; naudokite vienam akcentui prieš dominuojančią prekės ženklo spalvą.
- Skaidytoji papildoma – du gretimi papildomos spalvos atspalviai. Beveik toks pat kontrastas, tačiau lengviau subalansuojamas.
- Triadinė – trys tolygiai išdėstyti atspalviai. Gyva, bet stabili kombinacija; leiskite vienai spalvai dominuoti, o kitas dvi naudokite kukliai.
- Tetradinė (kvadratas) – keturi atspalviai. Turtingos schemos iliustracijoms ir duomenų vizualizacijai; sunkiai subalansuojamos naudotojo sąsajos darbe.
- Analogiška – artimiausi kaimyniniai atspalviai. Maža įtampa, tinka fonams ir gradientams.
- Monochromatinė – vienas atspalvis skirtingais šviesumo laipsniais. Saugiausias pasirinkimas sąsajos būsenoms (užvedimas, aktyvus, išjungtas).
Paletės skydelis vienu paspaudimu nukopijuoja visą rinkinį pasirinktu formatu: paprastas HEX, RGB, HSL, OKLCH, paruoštos įklijuoti CSS individualios savybės (--color-1: …), SCSS kintamieji arba JSON, skirtas perduoti kodui.
Įklijuokite bet ką, gaukite viską
Įvesties laukai priima praktiškai bet kokį spalvos žymėjimą: #f80, #ff8800, 8 skaitmenų HEX su alfa kanalu, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 arba CSS spalvų pavadinimus, pvz., rebeccapurple. Kad ir kas būtų įvesta, gausite septynis sinchronizuotus rezultatus: HEX, RGB, HSL, HSV, LCH, OKLCH ir CMYK, kiekvieną su savo kopijavimo mygtuku.
Du pagalbiniai ženkliukai po peržiūra pavadina spalvą už jus: artimiausią CSS pavadintą spalvą (naudinga greitiems prototipams ir kalbant apie spalvas) ir artimiausią „Tailwind“ žymą (pvz., orange-500), kad galėtumėte likti savo dizaino sistemoje, o ne kurti vienkartines reikšmes.
Patempkite skaidrumo (alfa) slankiklį po peržiūra, ir rezultatai persijungs į skaidrias formas – #RRGGBBAA, rgba(), hsla() – o peržiūra bus rodoma ant šachmatinio fono, kad matytumėte skaidrumą.
Kurį formatą naudoti?
| Formatas | Pilnas pavadinimas | Kada naudoti? |
|---|---|---|
| HEX | Hexadecimal | Interneto standartas. Kompaktiškas, universaliai palaikomas, lengvai kopijuojamas. 8 skaitmenys prideda alfa kanalą. |
| RGB | Red, Green, Blue | Kaip mąsto ekranai. Trys šviesos kanalai, 0–255. Formatas, kurio tikisi dauguma API ir „canvas“ kodo. |
| HSL | Hue, Saturation, Lightness | Žmonėms, redaguojantiems rankiniu būdu. „Šiek tiek šviesesnė“ ar „mažiau sodri“ – tai tik vieno skaičiaus pakeitimas. |
| HSV | Hue, Saturation, Value | Grafikos programinė įranga. Modelis, kuriuo grįsti parinkikliai „Photoshop“ ir GIMP programose. |
| LCH | Lightness, Chroma, Hue | Suvokiamai vienoda. Vienodi skaitiniai žingsniai atrodo kaip vienodi vizualiniai žingsniai – tai, kuo HSL tik apsimeta esanti. |
| OKLCH | OK Lightness, Chroma, Hue | Modernus CSS pasirinkimas. Ištaiso LCH atspalvio poslinkius mėlynuose tonuose; palaikomas visose šiuolaikinėse naršyklėse ir idealiai tinka dizaino žymų sistemoms. |
| CMYK | Cyan, Magenta, Yellow, Key | Orientuotas į spaudą. Apytikslis konvertavimas kalbant su spaudos dizaineriais – galutinės vertės visada priklauso nuo spausdintuvo spalvų profilio. |
Smulkmenos, kurios taupo laiką
- Istorija tvarkosi pati. Paskutinės 24 spalvos, su kuriomis dirbote, išlieka net atnaujinus puslapį – jos saugomos tik jūsų naršyklės vietinėje saugykloje ir niekur neįkeliamos.
- Pipetė. Naršyklėse, palaikančiose EyeDropper API (Chrome ir Edge), galite pasirinkti spalvą bet kur savo ekrane, net už naršyklės lango ribų.
- Valdymas klaviatūra. Ratas ir sodrumo bei ryškumo drobė reaguoja į rodyklių klavišus tiksliam reguliavimui pikselio tikslumu.
- Išankstiniai nustatymai apima dažniausiai naudojamas bazines spalvas, kai reikia tiesiog greito starto.
Dažniausiai užduodami klausimai (DUK)
Ar oklch() saugu naudoti gamybinėje CSS?
Taip. Visos šiuolaikinės „Chrome“, „Edge“, „Firefox“ ir „Safari“ versijos palaikooklch(), ir jis tapo pageidaujamu žymėjimu dizaino žymoms (Tailwind CSS 4 visą savo paletę apibrėžia būtent juo). Labai senoms naršyklėms pateikite HEX atsarginį variantą ankstesnėje eilutėje – šis įrankis pateikia abi vertes.