# Selector de color

> Selector de color gratuito: elige cualquier color visualmente o por código hexadecimal, ve sus valores HEX, RGB y HSL, cópialos con un clic y obtén tonos y matices.

Elige cualquier color con el selector visual o escribe un código hexadecimal. Obtienes sus valores HEX, RGB y HSL con copia en un clic, más cinco tonos más oscuros y cinco matices más claros.

*Interactive tool: enter your values at https://toollantern.win/es/selector-de-color/ and results update instantly in your browser.*

## Qué hace esta herramienta

El selector muestra un color de tres formas a la vez: HEX para la web, RGB para pantallas y HSL para diseño. Haz clic en cualquier valor para copiarlo. Debajo de los valores obtienes diez colores relacionados: cinco tonos (el mismo matiz, cada vez más oscuro) y cinco matices (el mismo matiz, cada vez más claro).

## Cómo se crean los tonos y matices

La herramienta convierte tu color a HSL y luego baja la **luminosidad** 10 puntos por cada tono y la sube 10 puntos por cada matiz, manteniendo el matiz y la saturación (casi) fijos. Los matices también suavizan un poco la saturación para que los pasos muy claros no se vean lavados.

## Ejemplo práctico

Elige **#3B82F6** (un azul medio). Sus valores son **rgb(59, 130, 246)** y **hsl(217, 91%, 60%)**. Un tono más oscuro es **#1D66E5**; un matiz más claro es **#6CA3F8**.

## Cuándo usar cada formato

Usa HEX en CSS y HTML, RGB cuando una API o herramienta pida los valores de los canales, y HSL cuando quieras ajustar un color por sensaciones (mueve el tono para cambiar de familia de color, o la luminosidad para variantes en modo oscuro).

## Limitaciones

El selector trabaja en el espacio de color sRGB, que cubre el uso estándar de web y pantallas. Los formatos de gama amplia como Display P3 no están representados.

## Preguntas frecuentes
### ¿Cómo copio un código de color?

Haz clic en cualquier valor HEX, RGB o HSL, o en cualquier muestra de tono o matiz. Se copia al instante en tu portapapeles, listo para pegar.

### ¿Cuál es la diferencia entre HEX, RGB y HSL?

Describen el mismo color de tres formas. HEX es una notación web compacta (#RRGGBB). RGB da los canales rojo, verde y azul de 0 a 255. HSL da el tono (la posición del color en la rueda), la saturación (intensidad) y la luminosidad.

### ¿Qué son los tonos y los matices?

Los tonos son tu color mezclado hacia el negro (más oscuro); los matices, hacia el blanco (más claro). Los diseñadores los usan para estados hover, degradados e interfaces por capas.

### ¿Puedo introducir un color por su código hexadecimal?

Sí. Escribe un código hexadecimal de 3 o 6 dígitos (con o sin #) en el campo hexadecimal y el selector, los valores y los tonos se actualizan.

---
Interactive version: https://toollantern.win/es/selector-de-color/