Selector de colors

Com utilitzar el selector de colors

1. Fes clic a la mostra de sota de Tria un color per obrir el selector de color del navegador i tria un color. També pots escriure o enganxar un valor al camp Codi del color: un codi HEX com #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) o un nom CSS com tomato.
2. La previsualització gran s’actualitza a l’instant, amb el codi HEX escrit en negre o en blanc, el que es llegeixi millor sobre aquell fons.
3. A Codis del color, copia el format que necessitis amb el botó Copia que hi ha al costat: HEX, RGB, HSL, HSV o CMYK.
4. Fes clic a Color aleatori quan vulguis inspiració, o a Tria de la pantalla (en els navegadors que ho admeten, com Chrome i Edge) per mostrejar qualsevol píxel de la pantalla, incloses altres finestres.

Tot passa al teu navegador: no s’envia enlloc cap color ni cap imatge.

Què vol dir cada codi de color

• HEX és la notació hexadecimal de sis xifres que s’utilitza en HTML i CSS. Cada parella de xifres és un canal (vermell, verd, blau) de 00 a FF, de manera que #1E90FF vol dir vermell 30, verd 144, blau 255.
• RGB dóna els mateixos tres canals com a nombres decimals de 0 a 255. És el que esperen la majoria de programes de disseny i biblioteques de programació.
• HSL descriu un color pel to (un angle de 0° a 360° al cercle cromàtic), la saturació i la lluminositat. És útil per aclarir o enfosquir un color canviant un sol nombre.
• HSV (també anomenat HSB) fa servir el to, la saturació i el valor (brillantor). És el model que hi ha darrere dels quadrats de color de Photoshop, Figma i molts altres editors.
• CMYK expressa el color com a percentatges de tinta cian, magenta, groc i negre.

Sobre els valors CMYK

Els codis CMYK són una conversió simple: K = 1 − max(R, G, B), després C = (1 − R − K) / (1 − K), i el mateix per a M i Y. És la fórmula estàndard dels manuals, però no fa servir cap perfil ICC. La impressió real depèn de la premsa, del paper i de les tintes, de manera que una impremta convertirà els teus colors amb el seu propi perfil i el resultat pot ser diferent. Utilitza aquests nombres com a punt de partida, no com a prova per a la impressió.

Com llegir les relacions de contrast

Sota el codi HEX, la previsualització mostra el Contrast sobre blanc i el Contrast sobre negre, calculats amb la fórmula de luminància relativa de WCAG 2. Es necessita una relació de 4,5:1 o més per al text normal al nivell AA, i de 3:1 per al text gran i els elements d’interfície. Si el teu color només arriba a 3:1 sobre blanc, reserva’l per a titulars grans o icones i fes servir un to més fosc per al text.

Consells

• Pots enganxar codis hexadecimals sense el #: 1e90ff també funciona, igual que les formes curtes com f60.
• S’accepten valors amb transparència, com rgb(0 0 0 / 50%); el selector mostra el color opac.
• El diàleg de color del navegador varia segons el sistema. Si necessites un valor precís, escriure’l al camp Codi del color sempre és exacte.