# Selector de colores online

> Rueda de color HSV, HSL y RYB de pintor, armonías listas y conversión HEX, RGB, HSL, OKLCH y CMYK. Token Tailwind más cercano. Gratis, sin instalar.

URL: https://acrafto.com/es/selector-de-colores-online/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

Elige un color en la rueda, ajústalo con precisión en el lienzo de saturación y brillo, y léelo en todos los formatos que use tu proyecto, desde `#RRGGBB` hasta `oklch()`. Este selector también incluye lo que otras herramientas dejan fuera: tres geometrías de rueda, incluida la rueda de pintor RYB, armonías que te construyen una paleta, canal alfa y exportación de toda la paleta con un clic como variables CSS, SCSS o JSON. Todo se calcula en tu navegador.

## RYB o RGB: tres ruedas de color en lugar de una

El selector **Modo de rueda** cambia cómo se distribuyen los tonos en la rueda:

- **HSV** y **HSL** son ruedas digitales. Los tonos se colocan como los mezcla la luz en una pantalla. Se diferencian en el cuadrado: en HSV la esquina más clara es el tono puro, en HSL los tonos puros quedan a media luminosidad, con blanco por encima.
- **RYB (de pintor)** organiza los tonos como los aprenden los pintores: rojo, amarillo y azul como primarios, con naranja, verde y morado entre medias ([modelo RYB en Wikipedia](https://es.wikipedia.org/wiki/Modelo_tradicional_de_coloraci%C3%B3n)). La diferencia se nota sobre todo en las armonías. En la rueda RYB, el complementario del rojo es el **verde** y el complementario del azul es el **naranja**, los pares clásicos de la pintura. La rueda digital empareja el rojo con el cian. Si alguna vez una paleta “complementaria” de un selector normal te pareció rara, este es el motivo.

## Armonías de color: una paleta que se arma sola

En el campo **Armonía de color** elige una regla. La rueda marca los colores acompañantes y debajo aparece la paleta lista:

- **Complementaria:** un color opuesto. El contraste más fuerte, sirve para un único acento junto al color principal de marca.
- **Complementaria dividida:** los dos vecinos del complementario. Casi el mismo contraste, pero más fácil de equilibrar.
- **Triádica:** tres tonos repartidos por igual en la rueda. Vivaz y estable a la vez, cuando uno domina y los otros dos se usan con moderación.
- **Tetrádica (cuadrado):** cuatro tonos. Esquemas ricos para ilustración y gráficos, difíciles de equilibrar en la interfaz de una app.
- **Análoga:** los vecinos más cercanos. Combinación tranquila para fondos y degradados.
- **Monocromática:** un tono en varios niveles de luminosidad. La opción más segura para estados de botón (hover, activo, deshabilitado).

Copia toda la paleta con un clic en el formato que necesites: **HEX** simple, **RGB**, **HSL**, **OKLCH**, **propiedades personalizadas CSS** (`--color-1: …`) listas para pegar, **variables SCSS** o **JSON** para código. Para comprobar si la paleta mantiene el contraste para personas que distinguen peor los tonos, haz una captura de pantalla y [conviértela a escala de grises](https://acrafto.com/es/convertir-imagenes-escala-de-grises-online-masivo-y-gratis/).

## Convierte HEX, RGB, HSL, OKLCH y CMYK: pega cualquier cosa, obtén todo

Los campos de entrada aceptan casi cualquier notación de color: `#f80`, `#ff8800`, hex de ocho dígitos con transparencia, `rgb()` y `rgba()`, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800` y nombres de color CSS como `rebeccapurple`. Sea lo que introduzcas, obtienes siete salidas sincronizadas: **HEX, RGB, HSL, HSV, LCH, OKLCH y CMYK**, cada una con su propio botón de copiar.

El deslizador de **Opacidad (alfa)** bajo la vista previa cambia las salidas a sus formas transparentes `#RRGGBBAA`, `rgba()` y `hsla()`. La vista previa se dibuja sobre un tablero de ajedrez, así que ves la transparencia de un vistazo.

## Encuentra el token de Tailwind CSS más cercano a cualquier color

Dos etiquetas bajo la vista previa nombran el color: el **color CSS con nombre más cercano** (útil para prototipos rápidos) y el **token de Tailwind más cercano**, por ejemplo `orange-500`. Así te mantienes dentro de tu sistema de diseño sin inventar valores sueltos. Haz clic en la etiqueta para copiarla.

Resuelve la pregunta que surge en cada entrega de diseño: el diseñador me mandó un código hex, ¿qué clase de Tailwind es la más parecida? La coincidencia se calcula contra la paleta por defecto de Tailwind CSS 4 (ver la [documentación de Tailwind](https://tailwindcss.com/docs/colors), en inglés), así que puedes usar el token directamente en el nombre de la clase.

## ¿Qué formato de color usar?

| Formato | Nombre completo | Cuándo usarlo |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **La opción por defecto para la web.** Corto, compatible en todas partes, fácil de copiar. Ocho dígitos añaden transparencia. |
| **RGB** | Red, Green, Blue | **Así piensan las pantallas.** Tres canales de luz de 0 a 255. El formato que esperan la mayoría de las API y el código de canvas. |
| **HSL** | Hue, Saturation, Lightness | **Para ajustar a ojo.** “Un poco más claro” o “menos saturado” significa cambiar un solo número. |
| **HSV** | Hue, Saturation, Value | **Software gráfico.** El modelo detrás del selector de color de Photoshop y GIMP. |
| **LCH** | Lightness, Chroma, Hue | **Uniformidad perceptual.** Los mismos pasos numéricos se ven como los mismos pasos visuales, algo que HSL solo aparenta. |
| **OKLCH** | OK Lightness, Chroma, Hue | **La opción moderna para CSS.** Corrige los saltos de tono en los azules que afectan a LCH. Compatible con todos los navegadores actuales y adecuado para tokens de diseño. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **Orientación para imprenta.** Conversión aproximada para hablar con la imprenta, los valores finales los determina su perfil de color. |

Por qué OKLCH es más uniforme perceptualmente que los modelos anteriores lo explica Björn Ottosson, autor del espacio Oklab, en su [artículo original](https://bottosson.github.io/posts/oklab/) (en inglés). La sintaxis y el soporte en navegadores los resume [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (en inglés). Cómo funciona el modelo de impresión lo explica [Wikipedia sobre el CMYK](https://es.wikipedia.org/wiki/Modelo_de_color_CMYK).

## Detalles que ahorran tiempo

- **El historial se guarda solo.** Los últimos 24 colores sobreviven a un refresco de la página. Se quedan solo en el almacenamiento de tu navegador y nunca se envían a ningún sitio.
- **Cuentagotas.** En navegadores con la API EyeDropper (Chrome y Edge) eliges un color desde cualquier parte de la pantalla, incluso fuera de la ventana del navegador. ¿Necesitas el color de una foto o un archivo de logo? Usa el [cuentagotas de imagen online](https://acrafto.com/es/selector-colores-imagen-online/).
- **Control por teclado.** La rueda y el lienzo de saturación y brillo responden a las flechas, así que puedes ajustar el color en pasos pequeños.
- **Los preajustes** cubren los colores base habituales cuando solo necesitas un punto de partida rápido.

## Preguntas frecuentes

### ¿Cómo convierto OKLCH a HEX?

Pega el valor `oklch()` en el campo OKLCH y las demás salidas, HEX incluido, se recalculan al instante. También funciona al revés: escribe un HEX y lee el `oklch()` correspondiente. Una advertencia: OKLCH puede describir colores fuera del rango sRGB, y esos se recortan a lo que sRGB puede mostrar. Por eso un `oklch()` muy saturado no se verá igual que su versión HEX en una pantalla de gama amplia.

### ¿Puedo usar oklch() en CSS de producción?

Sí. Todas las versiones actuales de Chrome, Edge, Firefox y Safari admiten `oklch()`, y se ha convertido en una notación popular para tokens de diseño (Tailwind CSS 4 define toda su paleta con ella). Para navegadores muy antiguos, pon un HEX de respaldo en la línea anterior. Esta herramienta te da los dos valores.

### ¿Por qué cambian las armonías al pasar a la rueda RYB?

Porque lo que cuenta como "opuesto" depende de cómo se reparten los tonos en el círculo. La rueda RYB distribuye los primarios de pigmento de forma uniforme, así que los pares complementarios coinciden con lo que saben los pintores: rojo y verde, azul y naranja, amarillo y morado. Las ruedas HSV y HSL distribuyen los tonos según cómo se mezcla la luz, por eso emparejan el rojo con el cian. Ninguna está equivocada: RYB sigue la enseñanza artística tradicional, HSV y HSL siguen lo que hacen las pantallas.

### ¿Puedo confiar en los valores CMYK para imprenta?

Tómalos como orientación. La conversión real para impresión depende del [perfil ICC](https://en.wikipedia.org/wiki/ICC_profile) (en inglés) de la impresora, el papel y la tinta. El mismo color RGB sale distinto en papel estucado que en papel sin estucar. Los valores de aquí usan la fórmula estándar, que te acerca bastante, pero la prueba final es cosa de la imprenta.

### ¿Dónde está el botón del cuentagotas en Firefox o Safari?

Está oculto a propósito. La [API EyeDropper](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, en inglés), en la que se apoya el botón, por ahora solo la implementan los navegadores basados en Chromium (Chrome, Edge, Opera). El resto de funciones del selector funciona en todas partes, solo falta la selección desde la pantalla. Si necesitas un color de una imagen, usa el [cuentagotas de imagen online](https://acrafto.com/es/selector-colores-imagen-online/), que funciona en cualquier navegador.

### ¿Es privado mi historial de colores?

Sí. El historial se guarda en el localStorage de tu navegador, en tu dispositivo. Nada de lo que eliges, pegas o copias se envía a ningún sitio. Toda la herramienta funciona como JavaScript en el navegador, algo que puedes comprobar en la pestaña de red de las herramientas de desarrollador.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))