Skip to content
user@convertitive:~$convertitive

Selector de Color

Elige una vez, obtén todos los formatos. Más una lectura en vivo del contraste WCAG frente a blanco y negro.

El selector a continuación muestra el color elegido y calcula sus representaciones en tres formatos: hex, rgb() y hsl(). Junto a cada formato, un botón para copiar con un solo toque. Debajo, el ratio de contraste WCAG en tiempo real frente a blanco puro y negro puro, ideal para verificar combinaciones de texto y fondo. Cada cálculo se ejecuta directamente en tu navegador; nada se envía a ningún servidor.

rgb(59 130 246)
hsl(217 91% 60%)

WCAG contrast vs:

White: 3.68:1

AA large only

Black: 5.71:1

AA body

How to use

  1. Elige un color

    Haz clic en la vista previa del color para usar el selector de color del sistema, o escribe directamente un valor hex o RGB.

  2. Copia el formato que necesitas

    Hex para almacenamiento y archivos de diseño. rgb() para código que opera con canales. hsl() para rotaciones de tono en tokens de diseño.

  3. Comprueba el contraste

    Las dos insignias de contraste muestran el ratio WCAG frente a blanco puro y negro puro. Úsalas para verificar las combinaciones de color de texto.

Frequently asked questions

¿Por qué tres formatos?
Cada uno tiene su uso. Hex es el formato de almacenamiento universal que se copia limpiamente en cualquier herramienta. rgb() es lo que el código programático genera y consume. hsl() permite ajustar la luminosidad o saturación de forma independiente, justo lo que se necesita para variantes de tokens de diseño como estados hover o ajustes de tema.
¿Qué mide la comprobación de contraste WCAG?
El ratio entre la luminancia relativa de dos colores, en una escala de 1:1 (idénticos) a 21:1 (negro sobre blanco). WCAG 2.1 AA exige 4,5:1 para texto de cuerpo y 3:1 para texto grande y componentes de interfaz. La fórmula está en WCAG 2.1 §1.4.3.
¿El selector admite OKLCH?
Aún no: hex, RGB y HSL cubren el 95% de los casos de uso habituales. Para OKLCH y el debate sobre colores perceptuales, consulta nuestra guía de formatos de color CSS. También puedes pegar un valor OKLCH en un preprocesador CSS; los navegadores modernos convierten internamente.
¿Por qué a veces el hex tiene 4 dígitos en lugar de 6?
El hex de tres y cuatro dígitos (por ejemplo, #F60, #F60A) es una abreviatura en la que cada dígito se duplica. #F60 equivale a #FF6600. La forma de 4 dígitos incluye el canal alfa. La mayoría del código moderno usa la forma completa de 6 u 8 dígitos para mayor claridad; ambas son CSS válido.
¿El selector guarda mi historial?
No. Todo se ejecuta en tu navegador; nada se envía a un servidor ni se almacena entre páginas.

Herramientas relacionadas