Instrumente pentru culori — selector, paletă, contrast, gradient și altele
Instrumente pentru culori
Instrumente gratuite online pentru culori — selector de culori, generator de palete, convertor de formate, simulator de daltonism, generator de gradiente, verificator de contrast WCAG, extractor de culoare dominantă, amestecător, temperatură de culoare, culori tradiționale chinezești. Totul în browser. Pentru scrierea HTML/CSS (echivalente hex/rgb/hsl, 148 de culori denumite, paletă web-safe de 216 culori, declarații gata de copiat) se folosește ajutorul orientat spre cod Coduri de culori HTML.
HEX:#ff0000
RGB:255, 0, 0
HSL:0, 100%, 50%
Complementară
Triadică
Tetradică
Analoagă
Complementară divizată
Original
Simulată
0%100%
Text-eșantion
50%
6500K
Cum funcționează fiecare mod
Selector: pătratul mare este o hartă saturație-valoare la nuanța curentă — de la stânga la dreapta crește saturația, de sus în jos scade luminozitatea. Se face clic oriunde pentru a alege o culoare. Bara verticală subțire din dreapta este cursorul de nuanță (0° până la 360°) — se trage pentru a schimba nuanța de bază, iar pătratul se redesenează în consecință. Partea din dreapta arată culoarea aleasă în formatele HEX, RGB și HSL — se face clic pe orice valoare pentru a o copia.
Paletă: selectorul de culoare din stânga și caseta de editare din dreapta păstrează aceeași culoare de bază — sunt sincronizate în ambele sensuri (se alege o culoare sau se scrie o valoare hex, iar amândouă se actualizează reciproc). Cele cinci rânduri de paletă de mai jos sunt toate derivate din această culoare de bază, prin rotirea nuanței pe cercul cromatic: Complementară (nuanță +180°, contrast cel mai puternic), Triadică (+120° / +240°, triadă echilibrată), Tetradică (+90° / +180° / +270°, patru culori în dreptunghi), Analoagă (-30° / bază / +30° / +60°, vecini armonioși) și Complementară divizată (+150° / +210°, mai blândă decât complementara pură). Prima mostră din fiecare rând este întotdeauna chiar culoarea de bază, iar restul sunt variantele ei cu nuanța rotită.
Convertire: se introduce orice culoare validă — HEX (#3b82f6), funcție CSS (rgb(59,130,246) / hsl(217,90%,60%)) sau culoare denumită (dodgerblue) — și se obține conversia instantanee în toate formatele principale. Lista derulantă de formate poate sugera analizorului formatul corect, dacă detectarea automată alege greșit. Rezultatul afișează HEX, RGB (0-255), HSL (grade, %, %), HSV și CMYK. Se face clic pe orice valoare pentru a o copia.
Daltonism: se încarcă o imagine și se alege un tip de deficiență a vederii culorilor pentru simulare. Instrumentul aplică o transformare matricială a răspunsului conurilor fiecărui pixel, remapând valorile RGB ca să aproximeze modul în care percep imaginea persoanele cu diferite forme de daltonism. Pânza din stânga arată originalul, cea din dreapta vederea simulată. Lista derulantă acoperă trei tipuri de dicromazie (lipsește un pigment de con: protanopie, deuteranopie, tritanopie), acromatopsia completă (fără vedere a culorilor) și trei tipuri de tricromazie anomală (răspuns slab al conurilor). Imaginile cu rezoluție mai mică se încarcă mai repede.
Gradient: acesta este un constructor vizual de gradiente CSS. Se alege liniar (direcțional) sau radial (din centru spre exterior), se stabilește unghiul (0° = de jos în sus, 90° = de la stânga la dreapta) și se definesc opririle de culoare. Fiecare oprire are un selector de culoare și este distribuită uniform (0%, 50%, 100% pentru trei opriri). Se apasă + Stop pentru a adăuga puncte intermediare de culoare, pentru gradiente mai complexe. Previzualizarea se actualizează live, iar CSS-ul generat este gata de copiat mai jos.
Contrast: calculează raportul de contrast WCAG 2.1 dintre textul din prim-plan și culoarea de fundal, folosind formula luminanței relative din valorile sRGB (cu corecție gamma). Raportul variază de la 1:1 (culori identice) la 21:1 (negru față de alb). Rezultatele arată trecut/eșuat la trei niveluri de conformitate: AA text normal (raport ≥ 4,5:1), AAA text mare (raport ≥ 4,5:1 pentru text ≥ 18 pt sau îngroșat ≥ 14 pt) și AAA text normal (raport ≥ 7:1). Previzualizarea textului-eșantion se actualizează în timp real pe măsură ce culorile se ajustează.
Extragere: se încarcă orice imagine, iar instrumentul identifică paleta de culori dominante prin cuantizarea culorilor. Imaginea este redusă la 100×100 px, apoi fiecare pixel este grupat într-o histogramă cu 4 biți pe canal (16 niveluri pentru fiecare R/G/B = 4096 de intervale). Pixelii transparenți sunt omiși. Intervalele cele mai frecvente sunt sortate după numărul de pixeli, iar culoarea centrală a fiecărui interval devine o mostră. Fiecare mostră arată valoarea sa HEX și procentul din pixelii imaginii pe care îl reprezintă. Cursorul numărului (2–12) controlează câte culori dominante sunt extrase.
Amestecător: amestecă două culori în spațiul de culoare RGB prin interpolare liniară. Cursorul de proporție determină amestecul: 0% este Culoarea 1 pură, 100% este Culoarea 2 pură, iar 50% este un amestec uniform. Fiecare canal R, G, B este interpolat independent (de exemplu roșu + albastru la 50% dă mov). Previzualizarea rezultatului și valorile HEX/RGB se actualizează live pe măsură ce se trage cursorul sau se schimbă una dintre culori.
Temperatură: convertește temperatura de culoare a corpului negru în kelvini în culoarea vizibilă corespunzătoare, folosind algoritmul de aproximare al lui Tanner Helland. Temperaturile joase (1000–3000 K) produc tonuri calde portocalii/roșii, ca lumina lumânării și a becurilor cu incandescență; intervalul de mijloc (4000–6500 K) dă de la alb neutru la lumină de zi; temperaturile mai mari (8000–40000 K) trec spre albastru rece, ca cerul înnorat și apa adâncă. Eticheta de dedesubt identifică cea mai apropiată sursă de lumină reală pentru fiecare temperatură.
Denumite: se răsfoiește o colecție combinată de 80 de culori tradiționale chinezești (胭脂, 朱砂, 黛蓝 etc. — nume preluate din literatura, pictura și tradițiile de vopsire chinezești clasice) și peste 140 de culori CSS denumite (paleta web standard). Se folosește caseta de căutare pentru a filtra după nume sau valoare HEX ori se trece între categorii cu lista derulantă. Se face clic pe orice cip de culoare pentru a vedea o previzualizare mare, cu numele și codul HEX — se face clic pe cod pentru a-l copia.