UltKit

Litaval

Veldu hvaða lit sem er og fáðu kóðann hans á öllum algengum sniðum, tilbúinn til afritunar. Búðu til samræmd litaspjöld, sæktu ríkjandi liti ljósmyndar án þess að hlaða henni upp og prófaðu hvort samsetning texta og bakgrunns stenst WCAG-kröfur um birtuskil.

Litaval

Valinn litur#2F6FED

Litakóðar á öllum sniðum

  • HEX#2F6FED
  • RGB47, 111, 237
  • HSL220°, 84%, 56%
  • HSB / HSV220°, 80%, 93%
  • CMYK (áætlað)80%, 53%, 0%, 7%
  • CSS rgb()rgb(47 111 237)
  • CSS hsl()hsl(220 84% 56%)

Litaspjöld út frá þessum lit

Andstæðir litir

Nágrannalitir

Þrílitir

Ljósari tónar (blandað við hvítt)

Dekkri tónar (blandað við svart)

Litaspjald úr mynd

Vafrinn þinn les myndina og hún er aldrei send: pixlar eru sýnatökuð á striga í þessu tæki og ekkert er sent neitt.

Slepptu ljósmynd, skjámynd eða merki hér

Sex ríkjandi litir myndarinnar birtast hér. Smelltu á lit til að hlaða honum í litavalið.

Birtuskilaprófun (WCAG 2.1)

Textalitur
Bakgrunnslitur

Sýnishorn af stórum texta

Kæmi ný öxi hægt yfir Ýlfur á jörðu. 0123456789

Birtuskilahlutfall14.67:1
  • AA · venjulegur textiStenst
  • AAA · venjulegur textiStenst
  • AA · stór textiStenst
  • AAA · stór textiStenst

Stór texti merkir að minnsta kosti 18 pt (24 px) venjulegur eða 14 pt (um 18,7 px) feitletraður. AA krefst 4,5:1 fyrir venjulegan texta og 3:1 fyrir stóran; AAA krefst 7:1 og 4,5:1.

Algeng CSS-litaheiti

Tuttugu lykilorð sem allir vafrar skilja, með nákvæmum HEX-, RGB- og HSL-gildum.

HeitiHEX
black#000000
white#ffffff
gray#808080
silver#c0c0c0
red#ff0000
crimson#dc143c
maroon#800000
tomato#ff6347
coral#ff7f50
orange#ffa500
gold#ffd700
yellow#ffff00
olive#808000
green#008000
teal#008080
aqua#00ffff
blue#0000ff
navy#000080
purple#800080
rebeccapurple#663399

Hvað HEX, RGB, HSL og HSB lýsa í raun

Allir litir á þessari síðu eru í sRGB, sjálfgefnu litrými vefsins síðan vafrar tóku það upp seint á tíunda áratugnum. Skjár blandar saman rauðu, grænu og bláu ljósi og hver rás hefur 256 stig (0–255), sem gefur 16.777.216 mögulega liti. RGB skrifar þessar þrjár tölur beint; HEX skrifar sömu þrjár tölurnar í sextándakerfi, tvo stafi hverja, þannig að #FF6600 er rautt 255, grænt 102, blátt 0. Stytta þriggja stafa formið tvöfaldar hvern staf: #F60 er #FF6600.

HSL og HSB (einnig kallað HSV) lýsa sömu litum á hátt sem er auðveldara að stilla í höndunum. Litblær er horn á litahringnum: 0° rautt, 120° grænt, 240° blátt. Munurinn liggur í síðustu tölunni. Í HSL er birtustig 100% alltaf hvítt og 50% er hreinasta útgáfa litblærsins; í HSB er birta 100% hreinn litblær og hvítt krefst mettunar 0%. Hönnunarforrit á borð við Photoshop og Figma nota HSB í litaveljurum sínum, en CSS skilur hsl() beint, og þess vegna eru bæði sniðin talin upp hér að ofan.

Af hverju CMYK-gildið er aðeins nálgun

Skjáir bæta við ljósi; prentarar draga það frá með bláu, rauðfjólubláu, gulu og svörtu bleki. Kerfin tvö ná yfir mismunandi litasvið. Mjög mettaðir skjálitir, svo sem skær RGB-grænn, rafblár eða neonappelsínugulur, liggja utan þess sem venjulegt prentblek getur endurskapað og því prentast þeir daufari en þeir líta út á skjánum.

CMYK-tölurnar hér nota einfalda stærðfræðilega umreikninginn án ICC-sniðs, sem hentar í grófa lýsingu en ekki fyrir prentsmiðju. Prentari umreiknar með sniði fyrir pappírinn og pressuna, svo sem FOGRA39 í Evrópu eða GRACoL í Bandaríkjunum, og sami RGB-litur getur gefið mismunandi blekhlutföll eftir sniðinu. Fyrir prentverk skaltu senda RGB- eða HEX-gildið ásamt því sniði sem prentarinn biður um.

Hvernig birtuskilahlutfallið er reiknað

WCAG 2.1 ber saman afstæða ljómun tveggja lita: ljósari liturinn plús 0,05, deilt með þeim dekkri plús 0,05. Niðurstaðan er á bilinu 1:1 (eins litir) til 21:1 (svart á hvítu). Stig AA krefst að lágmarki 4,5:1 fyrir venjulegan texta og 3:1 fyrir stóran texta, það er 18 punkta eða 14 punkta feitletraðan; stig AAA hækkar það í 7:1 og 4,5:1. Hlutar notendaviðmóts, svo sem rammar inntaksreita og tákn, þurfa 3:1 gagnvart umhverfi sínu samkvæmt viðmiði 1.4.11.

Ljómun vegur grænt miklu þyngra en blátt, því augað er næmast fyrir því. Þess vegna fellur gulur texti á hvítu illa á prófinu en dökkblár á hvítu stenst það auðveldlega, þó að báðir litirnir virðist fullmettaðir. Merki og eingöngu skrautlegur texti eru undanþegin reglunni.

Litaspjald úr ljósmynd eða lógói

Myndlitaspjaldið les skrána með canvas í vafranum, minnkar hana í mest 200 pixla á lengri hliðinni og flokkar svipaða pixla með miðgildisskiptingu (median-cut) sem Paul Heckbert lýsti árið 1982: litasviðinu er skipt aftur og aftur eftir breiðustu rásinni þar til sex hópar eru eftir, og meðaltal hvers hóps verður að litasýni. Gegnsæir pixlar eru hunsaðir, þannig að merki á gegnsæjum bakgrunni gefur liti merkisins.

Þegar þú hefur litina virkar einfalt merki oft betur sem vektor. Mynd í SVG breytirinn rekur það í form sem halda nákvæmlega þessum litum, og ef þú ert að hanna haus fyrir rás, aðlagar stærðarbreytir fyrir YouTube-borða myndina að 2560 × 1440 með öryggissvæðið í huga.

Algengar spurningar

Af hverju er „green“ í CSS dekkra en græni liturinn í RGB-litavalinu?
Lykilorðið green er #008000, meðalgrænn litur sem erfðist úr gamla 16 lita HTML-litaspjaldinu. Fullmettaði liturinn #00FF00 heitir lime. Allur CSS-listinn geymir svipaðar óvæntar uppákomur: gray (#808080) er dekkri en darkgray (#A9A9A9).
Er myndinni minni hlaðið upp þegar ég sæki litaspjald úr henni?
Nei. Vafrinn þinn opnar skrána, teiknar hana á canvas í minni og greinir hana þar. Engin beiðni er send með myndinni og þegar flipanum er lokað er henni eytt.
Hvaða birtuskilahlutfall þarf meginmálstexti?
Að minnsta kosti 4,5:1 til að uppfylla stig AA í WCAG 2.1 og 7:1 fyrir stig AAA. Fyrirsagnir sem eru 18 punktar eða stærri, eða 14 punkta feitletraðar, mega nota 3:1 fyrir AA. Mörg hönnunarkerfi stefna á 4,5:1 alls staðar til að textinn haldist læsilegur á daufum skjám og í sólskini.
Get ég notað 8 stafa HEX-kóða með gegnsæi?
Já, í CSS. Síðustu tveir stafirnir eru gegnsæisrásin, þannig að #2F6FED80 er sami blái liturinn með um 50% ógegnsæi. Þessi litaveljari vinnur með ógegnsæa liti og sýnir því sex stafi; bættu gegnsæisparinu við sjálfur þegar þú þarft á því að halda.
Hve marga nefnda liti hefur CSS?
CSS Color Module Level 4 skilgreinir 148 litaheiti, að tvíritunum meðtöldum eins og gray og grey. Nýjasta er rebeccapurple (#663399), bætt við árið 2014 til minningar um Rebeccu Meyer, dóttur CSS-höfundarins Erics Meyer.