El Convertidor de Format de Color tradueix qualsevol color entre HEX, RGB, HSL, HSV i OKLCH. Tria un color amb el selector natiu, escriu un valor hexadecimal, enganxa qualsevol cadena de color CSS, o ajusta els controls lliscants RGB — cada format s'actualitza en directe i cadascun té el seu propi botó de Copiar.
El CSS modern et dona una dotzena de maneres d'escriure el mateix color: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), a més de variants alpha de cadascun. Sovint necessites convertir entre ells — un disseny de Figma et dona un OKLCH, el teu codi utilitza HEX, i les variables del teu tema prefereixen HSL per als retocs de hover. El Convertidor de Format de Color fa totes les conversions en un sol panell. Tria un color del selector natiu, enganxa un color existent en qualsevol sintaxi, o arrossega els controls lliscants RGB per ajustar-ne un. Cada format habitual es renderitza simultàniament: HEX (amb alpha), rgb()/rgba(), hsl()/hsla(), hsv(), i oklch() — a més d'un fragment de variable CSS i el valor de luminància calculat per a càlculs ràpids de contrast. El canal alpha s'admet de principi a fi. Cada format té el seu propi botó de Copiar per a un ús amb un sol clic, i l'analitzador accepta noms de color natius i tot el que admet CSS.
Mostra HEX, RGB/RGBA, HSL/HSLA, HSV i OKLCH simultàniament — tria el format que necessiti el teu codi de destí sense haver de convertir cada cop.
Accepta HEX (#abc o #aabbcc o #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() i noms de color natius. Enganxa qualsevol cosa que admeti CSS.
Gestiona el nou format OKLCH utilitzat al CSS modern — un espai de color perceptualment uniforme que s'està convertint en el nou estàndard dels sistemes de disseny.
Cada sortida té el seu propi botó de Copiar. Fes clic per agafar exactament el format que necessites per al teu codi, sense selecció manual.
Ajusta els controls lliscants de Vermell/Verd/Blau/Alpha per a un ajust fi. Cada format s'actualitza en temps real mentre arrossegues.
La transparència es gestiona a tots els formats: #RRGGBBAA, rgba(...), hsla(...). Defineix-la un cop, convertida a tot arreu.
Figma et dona un OKLCH o HSL — enganxa'l, copia l'equivalent HEX per a la teva configuració de Tailwind o variables CSS sense sortir del navegador.
Arrossega els controls lliscants per explorar tons, anotant els valors OKLCH per a una paleta sistemàtica del sistema de disseny.
Converteix un color de marca a la seva forma HSL perquè puguis utilitzar hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) per als estats de hover.
El camp de luminància et dona el valor brut utilitzat en els càlculs de contrast WCAG — útil per als càlculs d'accessibilitat.
Enganxa un oklch(...) d'un fitxer CSS que estàs llegint i veu a l'instant quin color produeix realment.
Fes clic a la icona de Formats de Color al dock de DevSuite Pro. S'obre un panell amb un selector de color, entrada hexadecimal i controls lliscants RGB.
Utilitza el selector de color, escriu un hexadecimal, o enganxa qualsevol cadena de color CSS (rgb(...), oklch(...), etc.). El color es mostra a l'instant.
Cada format es renderitza a sota: HEX, RGB, HSL, HSV, OKLCH, variable CSS i luminància. Tots romanen sincronitzats mentre ajustes.
Arrossega els controls lliscants R/G/B/A per a ajustos fins. Ideal per aconseguir un to específic que coincideixi amb una especificació de disseny.
Fes clic a Copiar a la fila del format que vols — el valor arriba al teu porta-retalls en la sintaxi correcta.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 64 eines de desenvolupador per al teu navegador.
