Desarrollo, 7 herramientas

Conversores, 4 herramientas

Texto, 5 herramientas

Color, 2 herramientas

Generadores, 3 herramientas

Imagen, 4 herramientas

PDF, 6 herramientas

Calculadoras, 4 herramientas

Herramientas abiertas · 0

Acerca de

Selector de color

Arrastra por el cuadrado de color, elige directamente de la pantalla o pega un color escrito de cualquier forma, y léelo en once formatos, cada uno a un clic para copiarlo. Un color fuera de lo que puede mostrar una pantalla corriente se lleva al más cercano, como lo especifica CSS Color 4, y su contraste como texto se mide según WCAG.

Qué hace

  • Un cuadrado de color con controles deslizantes de tono y opacidad, y el cuentagotas (Elegir de la pantalla) en Chrome y Edge.
  • Colores pegados en cualquier forma: hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3), los 148 nombres CSS, hsv(), cmyk(), 0xAARRGGBB.
  • Se lee como HEX, RGB, HSL, HSV, HWB, OKLCH, OKLab, CIE Lab y LCH, Display P3 y CMYK, con el nombre CSS más cercano.
  • Nueve tintes y nueve sombras.
  • Contraste WCAG 2 sobre blanco, sobre negro y sobre un fondo a tu elección: AA, AAA y texto grande.
  • Un color de gama amplia llevado a sRGB, con una nota que lo dice.
  • Los colores elegidos se conservan durante la visita; Crear una paleta pasa uno al Creador de paletas.

Cómo se usa

  1. Elige un color en el cuadrado, con el cuentagotas o pegando uno.
  2. Cópialo en el formato que pida tu código.
  3. Comprueba su contraste con el fondo sobre el que irá.
  4. Pulsa Crear una paleta para construir una a partir de él.

Qué no hace

  • Colores de una imagen: el Creador de paletas encuentra los colores principales de una foto.
  • Un color en la barra de direcciones: la dirección lleva la ventana, no lo que hay en ella.
  • Contraste APCA: pertenece a WCAG 3, que sigue siendo un borrador, y las auditorías comprueban WCAG 2.

Preguntas

¿Qué es OKLCH?

Una forma de escribir un color por luminosidad, croma y tono que sigue cómo ve el ojo, de modo que dos colores con la misma L se ven igual de claros. CSS la admite, y Tailwind 4 escribe su paleta con ella.

¿Por qué cambió mi color Display P3?

Porque sRGB no puede mostrarlo. Se llevó al color más cercano que sí se puede mostrar, reduciendo el croma como lo especifica CSS Color 4, y la herramienta avisa cuando lo hace.

¿Qué contraste necesito?

4,5:1 para texto normal y 3:1 para texto grande en el nivel AA; 7:1 y 4,5:1 en AAA.

¿Funciona el cuentagotas en Firefox o Safari?

No. La API EyeDropper solo está en Chrome, Edge y Opera; en otros navegadores la herramienta lo indica.

Todo lo de aquí funciona en tu navegador. Nada de lo que escribes, pegas o abres se sube, y no hay cuenta ni cola. Cómo funciona.

Para una sola tarea

  • HEX a RGB: Un código hex como rgb() o rgba(), con códigos cortos y alfa incluidos.
  • RGB a HEX: Un color rgb() como código hex, de seis dígitos u ocho con alfa.

Se usa a menudo con

Todas las herramientasAcerca de utilbrewPrivacidad