Kolore-hautatzailea
Hautatu edozein kolore eta lortu haren kodea ohiko formatu guztietan, kopiatzeko prest. Sortu bat datozen paletak, atera argazki baten kolore nagusiak hura igo gabe, eta egiaztatu testu eta atzeko plano bikote batek WCAG kontrastea betetzen duen.
Kolore-hautatzailea
Kolore-kodeak formatu guztietan
- HEX#2F6FED
- RGB47, 111, 237
- HSL220°, 84%, 56%
- HSB / HSV220°, 80%, 93%
- CMYK (gutxi gorabehera)80%, 53%, 0%, 7%
- CSS rgb()rgb(47 111 237)
- CSS hsl()hsl(220 84% 56%)
Kolore honetatik sortutako paletak
Osagarria
Analogoa
Triadikoa
Tonu argiak (zuriarekin nahastuta)
Itzalak (beltzarekin nahastuta)
Irudi bateko paleta
Zure irudia zure nabigatzaileak irakurtzen du eta ez da inoiz igotzen: pixelak gailu honetako canvas batean lagintzen dira eta ez da ezer inora bidaltzen.
Jaregin hemen argazki, pantaila-argazki edo logo bat
Zure irudiko sei kolore nagusiak hemen agertuko dira. Egin klik lagin batean hautatzailera kargatzeko.
Kontraste-egiaztatzailea (WCAG 2.1)
Testu handiaren lagina
Zuhaitz handi baten azpian, azeri azkar batek txakur alferra jauzi egiten du. 0123456789
- AA · testu arruntaGainditu
- AAA · testu arruntaGainditu
- AA · testu handiaGainditu
- AAA · testu handiaGainditu
Testu handia da gutxienez 18 pt (24 px) arrunta edo 14 pt (18,7 px inguru) lodia. AA mailak 4,5:1 behar du testu arruntarentzat eta 3:1 testu handiarentzat; AAA mailak 7:1 eta 4,5:1.
CSS-ko kolore izendunak (ohikoenak)
Nabigatzaile guztiek ulertzen dituzten hogei hitz gako, HEX, RGB eta HSL balio zehatzekin.
| Izena | HEX | RGB | HSL |
|---|---|---|---|
black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
white | #ffffff | 255, 255, 255 | 0°, 0%, 100% |
gray | #808080 | 128, 128, 128 | 0°, 0%, 50% |
silver | #c0c0c0 | 192, 192, 192 | 0°, 0%, 75% |
red | #ff0000 | 255, 0, 0 | 0°, 100%, 50% |
crimson | #dc143c | 220, 20, 60 | 348°, 83%, 47% |
maroon | #800000 | 128, 0, 0 | 0°, 100%, 25% |
tomato | #ff6347 | 255, 99, 71 | 9°, 100%, 64% |
coral | #ff7f50 | 255, 127, 80 | 16°, 100%, 66% |
orange | #ffa500 | 255, 165, 0 | 39°, 100%, 50% |
gold | #ffd700 | 255, 215, 0 | 51°, 100%, 50% |
yellow | #ffff00 | 255, 255, 0 | 60°, 100%, 50% |
olive | #808000 | 128, 128, 0 | 60°, 100%, 25% |
green | #008000 | 0, 128, 0 | 120°, 100%, 25% |
teal | #008080 | 0, 128, 128 | 180°, 100%, 25% |
aqua | #00ffff | 0, 255, 255 | 180°, 100%, 50% |
blue | #0000ff | 0, 0, 255 | 240°, 100%, 50% |
navy | #000080 | 0, 0, 128 | 240°, 100%, 25% |
purple | #800080 | 128, 0, 128 | 300°, 100%, 25% |
rebeccapurple | #663399 | 102, 51, 153 | 270°, 50%, 40% |
Zer deskribatzen duten benetan HEX, RGB, HSL eta HSB balioek
Orri honetako kolore guztiak sRGB espazioan daude, hau da, 1990eko hamarkadaren amaieran nabigatzaileek onartu zutenetik webaren kolore-espazio lehenetsia. Pantailek argi gorria, berdea eta urdina nahasten dituzte, eta kanal bakoitzak 256 maila ditu (0–255), hau da, 16.777.216 kolore posible. RGB formatuak hiru zenbaki horiek zuzenean idazten ditu; HEX formatuak hiru zenbaki berak idazten ditu 16 oinarrian, bi digitu bakoitzeko, beraz #FF6600 hau da: gorria 255, berdea 102, urdina 0. Hiru digituko laburdurak digitu bakoitza bikoizten du: #F60 eta #FF6600 berdinak dira.
HSL eta HSB (HSV ere deitzen zaio) formatuek kolore berberak deskribatzen dituzte, baina eskuz doitzeko errazagoa den moduan. Tonua kolore-gurpileko angelu bat da: 0° gorria, 120° berdea, 240° urdina. Aldea azken zenbakian dago. HSLn, %100eko argitasuna zuria da beti eta %50ekoa tonuaren bertsio purena; HSBn, %100eko distira tonu purua da, eta zuria lortzeko %0ko saturazioa behar da. Photoshop eta Figma bezalako diseinu-aplikazioek HSB erabiltzen dute kolore-hautatzaileetan, eta CSSk berez hsl() ulertzen du; horregatik agertzen dira bi formatuak goian.
Zergatik den CMYK balioa hurbilketa bat besterik ez
Pantailek argia gehitzen dute; inprimagailuek kendu egiten dute, tinta ziana, magenta, horia eta beltzarekin. Bi sistemek kolore-tarte desberdinak estaltzen dituzte, gamutak deitzen direnak. Pantailako kolore oso saturatuak, hala nola RGB berde bizia, urdin elektrikoa edo laranja neona, prozesu-tintek erreproduzitu dezaketenaren kanpoan daude; horregatik, inprimatuta monitorean baino apalagoak ikusten dira.
Hemengo CMYK zenbakiek ICC profilik gabeko bihurketa matematiko soila erabiltzen dute; hori lagungarria da gutxi gorabeherako argibide baterako, baina ez inprimategirako. Inprimategiek bere paperaren eta makinaren profilarekin bihurtzen dute, adibidez Europan FOGRA39 edo Estatu Batuetan GRACoL, eta RGB kolore berak tinta-ehuneko desberdinak izan ditzake bakoitzean. Inprimatzeko lanetan, bidali RGB edo HEX balioa eta zure inprimategiak eskatzen duen profila.
Nola kalkulatzen den kontraste-erlazioa
WCAG 2.1 estandarrak bi koloreren argitasun erlatiboa alderatzen du: argiena gehi 0,05, ilunena gehi 0,05 zati. Emaitza 1:1 (kolore berdinak) eta 21:1 (beltza zuriaren gainean) artekoa da. AA mailak gutxienez 4,5:1 eskatzen du testu arruntarentzat eta 3:1 testu handiarentzat, hau da, 18 puntukoa edo 14 puntukoa lodia; AAA mailak 7:1 eta 4,5:1era igotzen du. Erabiltzaile-interfazearen zatiek, adibidez sarrera-eremuen ertzek eta ikonoek, 3:1 behar dute ingurunearen aldean, 1.4.11 betetze-irizpidearen arabera.
Argitasunak berdeari askoz pisu handiagoa ematen dio urdinari baino, begia berdearekiko sentikorrena delako. Horregatik, testu horia zuriaren gainean oso gaizki ikusten da, eta urdin iluna zuriaren gainean erraz gainditzen du, nahiz eta bi koloreak guztiz saturatuak ematen duten. Logotipoak eta testu apaingarri hutsa arau honetatik kanpo daude.
Paleta bat lortu argazki edo logo batetik
Irudiaren paletak zure fitxategia nabigatzailearen canvasarekin irakurtzen du, alde luzean gehienez 200 pixelera txikitzen du eta antzeko pixelak taldekatzen ditu Paul Heckbertek 1982an deskribatutako median-cut metodoarekin: kolore-tartea behin eta berriz zatitzen da kanalik zabalenean, sei talde geratu arte, eta talde bakoitzaren batezbestekoa lagin bihurtzen da. Pixel gardenak ez dira kontuan hartzen, beraz atzeko plano gardena duen logo batek logoaren koloreak ematen ditu.
Koloreak eskuratu ondoren, logo laua bektore gisa hobeto ibili ohi da. Irudia SVG bihurtzeko tresnak forma bihurtzen du, kolore zehatz horiek mantenduz, eta kanal baterako goiburua diseinatzen ari bazara, YouTube banner tamaina-aldatzaileak artelana 2560 × 1440 neurrira egokitzen du, eremu segurua kontuan hartuta.
Maiz egiten diren galderak
- Zergatik da CSSko «green» RGB hautatzaileko berdea baino ilunagoa?
- Green gako-hitza #008000 da, HTMLren 16 koloreko paleta zaharretik datorren berde ertaina. Guztiz saturatutako #00FF00 kolorea lime deitzen da. CSS zerrenda osoak antzeko sorpresak ditu: gray (#808080) darkgray (#A9A9A9) baino ilunagoa da.
- Paleta bat ateratzean, igotzen al da nire irudia?
- Ez. Zure nabigatzaileak irekitzen du fitxategia, memorian canvas batean marrazten du eta bertan aztertzen du. Ez da irudiarekin inolako eskaerarik egiten, eta fitxa ixtean baztertu egiten da.
- Zer kontraste-erlazio behar dut testu nagusirako?
- Gutxienez 4,5:1 WCAG 2.1 AA mailarako, eta 7:1 AAA mailarako. 18 puntukoak edo handiagoak diren edo 14 puntuko lodiak diren goiburuek 3:1 erabil dezakete AArako. Diseinu-sistema askok 4,5:1 hartzen dute helburu toki guztietan, testua pantaila ilunetan eta eguzkitan irakurgarri egon dadin.
- Erabil al dezaket 8 digituko HEX kode bat gardentasunarekin?
- Bai, CSSn. Azken bi digituak alfa kanala dira, beraz #2F6FED80 urdin bera da, %50 inguruko opakotasunarekin. Hautatzaile honek kolore opakoekin lan egiten du, beraz sei digitu erakusten ditu; gehitu alfa bikotea zeuk behar duzunean.
- Zenbat kolore izendun ditu CSSk?
- CSS Color Module Level 4 estandarrak 148 kolore-gako-hitz definitzen ditu, gray eta grey bezalako ortografia bikoitzak barne. Berriena rebeccapurple (#663399) da, 2014an gehitua, Rebecca Meyer-en oroimenez, CSSren egile Eric Meyerren alabarena.