Un pastel es un color puro con mucho blanco mezclado
Un color pastel es un tono puro aclarado con mucho blanco hasta que se ve suave y pálido. El rosa de la primera pantalla, #FFCAE0, es un 21 % del color puro #FF006A más un 79 % de blanco, y el amarillo limón #FDF6C5 es un 22 % de #FFDF00, un 77 % de blanco y un 1 % de negro. Wikipedia define el pastel como cualquier tonalidad con un valor alto (la luminosidad) y una saturación baja a media.
Elige una familia de color y un tono, y el generador saca una paleta pastel de 3 a 8 colores. Puedes fijar los colores que te gusten y volver a sacar solo los demás, o arrastrar un punto del mapa pastel para afinar a mano el tono y la nitidez. De cada color te muestra un texto a juego que se lee bien y su contraste, los códigos HEX, RGB, HSL, HWB y OKLCH, y la mezcla de color puro, blanco y negro.
Cuándo conviene una paleta pastel
Los pasteles cansan poco la vista en superficies grandes y no tapan el texto ni las fotos, por eso se usan tanto como fondo. Lo que hay que comprobar depende de dónde vaya el color.
- Webs y apps: fondos de tarjetas, barras de aviso y etiquetas son superficies amplias que no deben gritar. Lo más importante es que el texto encima siga leyéndose, así que revisa el texto a juego y su contraste.
- Diseños infantiles y de primavera: invitaciones de bautizo o de baby shower, fichas escolares o un banner de rebajas de primavera piden una imagen suave. Mezcla varias familias, pero con un único tono, y la paleta seguirá viéndose como un conjunto.
- Presentaciones y documentos: úsalos en las franjas de las tablas, en las cajas de cada paso y en el fondo de los gráficos. Un solo color de acento fuerte junto a varios pasteles deja claro qué mirar primero.
- Agendas, pegatinas e ilustración: para decorar un planificador, preparar pegatinas o elegir los colores de base de una ilustración. Al pasar un color de pantalla a pintura o a papel puede no salir igual, así que haz una prueba de impresión.
Cómo usar el generador
- En Familia de color elige Todas o una de rojo, naranja, amarillo, verde, menta, azul, morado y rosa. Con una sola familia, el tono y la nitidez se reparten para que los colores no se solapen.
- Elige un Tono (Pálido, Suave, Nítido o Mezcla) y una Cantidad de 3 a 8 colores. Si cambias la familia o el tono, los colores que no están fijados se vuelven a sacar al instante.
- Pulsa Sacar nuevos o la barra espaciadora. Haz clic en el candado de una tarjeta para que ese color se mantenga en las siguientes tiradas.
- Haz clic en una tarjeta para elegir su color y luego arrastra su punto en el mapa pastel o haz clic donde quieras. De izquierda a derecha cambia el tono y de arriba abajo cambia la nitidez. Con el punto enfocado, las flechas lo mueven un paso, y con Mayús, diez.
- Si ya tienes un color, por ejemplo el de tu marca, escríbelo en Convertir mi color en pastel como #2563EB, rgb(37 99 235) o royalblue. Se convierte en un pastel del mismo tono, entra en la casilla elegida y queda fijado.
- Llévate la paleta con Copiar todos los HEX, Copiar variables CSS (con los textos a juego), Guardar PNG (1200 × 630) o Copiar enlace. El enlace guarda los colores y cuáles están fijados.
Un pastel se define por la cantidad de blanco
La notación HWB de CSS Color 4 describe un color como un tono más la cantidad de blanco y de negro que lleva mezclada. Cualquier color de pantalla se puede reescribir exactamente como un reparto entre color puro, blanco y negro: el blanco es el menor de los valores RGB, el negro es 255 menos el mayor, y lo que queda es el color puro. Un pastel es un color en el que domina el blanco y apenas hay negro.
| Pastel | Color puro | Color puro · blanco · negro | CSS hwb() |
|---|---|---|---|
| #FFCAE0 | #FF006A | 21 % · 79 % · 0 % | hwb(335 79.2% 0%) |
| #FFD2B4 | #FF6600 | 29 % · 71 % · 0 % | hwb(24 70.6% 0%) |
| #FDF6C5 | #FFDF00 | 22 % · 77 % · 1 % | hwb(53 77.3% 0.8%) |
| #C9FFE6 | #00FF89 | 21 % · 79 % · 0 % | hwb(152 78.8% 0%) |
| #DDD4FF | #3500FF | 17 % · 83 % · 0 % | hwb(253 83.1% 0%) |
El generador no fija estos porcentajes directamente. Elige un punto de la recta que une el color puro con el blanco en OKLab, un espacio de color pensado para parecerse a cómo vemos la luminosidad. La razón es que el mismo 79 % de blanco se ve muy luminoso sobre un amarillo y menos sobre un morado. El valor de nitidez del mapa es la posición de ese punto, y la mezcla del panel de detalle es el resultado repartido de nuevo en HWB.
Tres tonos: pálido, suave y nítido
La nitidez va de 0 a 100, y cuanto más cerca de 0, más blanco. Los tonos son tres tramos de nitidez, y Mezcla saca colores de todo el rango de 0 a 100. La proporción de blanco es el rango que resulta al calcular todos los tonos del mapa.
| Tono | Nitidez | Proporción de blanco | Rosa | Menta | Celeste | Va bien para |
|---|---|---|---|---|---|---|
| Pálido | 0-29 | 76-93 % | #FFDDEE | #D7FFF7 | #D2ECFE | Fondos de página y superficies grandes |
| Suave | 30-64 | 67-87 % | #FFC7E3 | #C8FFF4 | #BAE3FD | Tarjetas, etiquetas, franjas de tabla |
| Nítido | 65-100 | 58-80 % | #FFAFD9 | #B8FFF2 | #A7DBFD | Ilustración, zonas de gráficos, formas pequeñas |
Tabla de colores pastel: 8 familias × 3 tonos
Son 24 códigos tomados en el tono central de cada familia, con nitidez 15 para Pálido, 48 para Suave y 82 para Nítido. Ocupan el mismo lugar y tienen los mismos valores que en el mapa del generador, así que puedes elegir uno aquí y moverlo un poco en el mapa para encontrar otros parecidos.
| Familia | Pálido | Suave | Nítido |
|---|---|---|---|
| Rojo | #FFE0DB | #FFCCC5 | #FFB6AD |
| Naranja | #FFE2CB | #FFD6B6 | #FFCCA3 |
| Amarillo | #FEF8D1 | #FDF5C1 | #FDF2B0 |
| Verde | #DAFFD2 | #CDFFC2 | #BEFFB0 |
| Menta | #D7FFF7 | #C8FFF4 | #B8FFF2 |
| Azul | #D2ECFE | #BAE3FD | #A7DBFD |
| Morado | #E9E4FF | #DCD3FF | #CFC1FF |
| Rosa | #FFDDEE | #FFC7E3 | #FFAFD9 |
El color del texto sobre un pastel
WCAG 2.2 pide un contraste de al menos 4,5:1 para el texto normal (AA) y, en el nivel más estricto, 7:1 (AAA). Los pasteles son tan claros que el texto blanco encima casi no se lee. Calculamos los 36.360 pasteles del mapa del generador: incluso el mejor de ellos da al texto blanco solo 1,8:1, que no llega ni al 3:1 admitido para texto grande.
En cambio, una versión muy oscura del mismo tono (luminosidad OKLCH del 36 %) alcanza al menos 6,1:1 sobre cualquier pastel, y el 88,0 % llega a 7:1 o más. Ese es el color que el generador muestra como texto a juego. El gris #767676, que sobre blanco apenas supera el 4,5:1, se queda corto sobre los pasteles.
| Fondo pastel | Texto blanco | #767676 | #333333 | Negro | Texto a juego |
|---|---|---|---|---|---|
| #FFCAE0 | 1,4 : 1 | 3,1 : 1 | 8,8 : 1 | 14,7 : 1 | #5F2642 · 8,0 : 1 |
| #FFD2B4 | 1,3 : 1 | 3,2 : 1 | 9,1 : 1 | 15,1 : 1 | #602E00 · 8,0 : 1 |
| #FDF6C5 | 1,0 : 1 | 4,1 : 1 | 11,5 : 1 | 19,1 : 1 | #463D00 · 9,9 : 1 |
| #C9FFE6 | 1,1 : 1 | 4,0 : 1 | 11,3 : 1 | 18,9 : 1 | #004933 · 9,4 : 1 |
| #DDD4FF | 1,4 : 1 | 3,2 : 1 | 8,9 : 1 | 14,9 : 1 | #413267 · 7,9 : 1 |
Los contrastes se truncan a un decimal. WCAG no redondea el contraste, de modo que 4,49:1 no cuenta como 4,5:1. El negro también se lee perfectamente, pero una sombra oscura del propio tono del pastel se ve como parte del mismo conjunto y conserva la suavidad que caracteriza a los pasteles.
Por qué unas familias se ven más claras que otras
Incluso con el mismo tono Suave, los pasteles amarillo y menta parecen casi blancos, mientras que el rosa y el morado se ven más intensos. Los colores puros parten de luminosidades distintas: el amarillo ya es muy luminoso, así que con un poco de blanco queda clarísimo, mientras que el morado es oscuro y necesita mucho más blanco para llegar a un nivel parecido.
| Familia | Color puro | Luminosidad del color puro (OKLCH) | Pastel suave | Luminosidad del pastel | Proporción de blanco |
|---|---|---|---|---|---|
| Amarillo | #FFE200 | 90,9 % | #FDF5C1 | 96,4 % | 76 % |
| Menta | #00FFE5 | 89,7 % | #C8FFF4 | 95,9 % | 78 % |
| Naranja | #FF9000 | 75,7 % | #FFD6B6 | 90,3 % | 71 % |
| Azul | #00B5FF | 73,2 % | #BAE3FD | 89,5 % | 73 % |
| Rosa | #FF00B3 | 66,3 % | #FFC7E3 | 88,7 % | 78 % |
| Morado | #8300FF | 53,4 % | #DCD3FF | 88,8 % | 83 % |
Por eso el generador añade más blanco a las familias más oscuras para que la luminosidad del pastel se mantenga por encima de cierto nivel. Oscurecer un amarillo para hacerlo más intenso solo lo vuelve apagado, como el mostaza o el verde oliva, así que incluso con nitidez 100 los pasteles amarillos conservan más de un 60 % de blanco.
Convertir tu propio color en pastel
Convertir mi color en pastel conserva el ángulo de tono OKLCH del color que escribes y aplica la nitidez central del tono que tienes elegido. Si tu color ya es más claro que el pastel más nítido de ese tono, elige la nitidez más cercana a su luminosidad original, de modo que un color que ya es pastel queda casi igual. Los resultados de abajo son con el tono Suave.
| Tu color | Pastel | Ángulo de tono · nitidez |
|---|---|---|
| #2563EB | #C7DBFF | 263° · 48 |
| #E11D48 | #FFCBCB | 18° · 48 |
| #16A34A | #C7FFCF | 149° · 48 |
| #F59E0B | #FFDDB9 | 70° · 48 |
| #7C3AED | #DBD3FF | 293° · 48 |
| #FFD1DC | #FFD1DC | 2° · 36 |
Los colores casi sin croma, como el gris, el blanco y el negro (croma OKLCH inferior a 0,006), no se pueden asignar a ninguna familia de pastel, así que no se convierten y la herramienta muestra un aviso. Un blanco apenas teñido como aliceblue #F0F8FF tiene un croma de 0,013, de modo que pasa al pastel más pálido de su tono, #E1F1FF.
Errores frecuentes
- Texto blanco sobre un fondo pastel: es habitual en botones y banners, pero el contraste es de solo 1 a 1,8:1 y cuesta leerlo. Usa el texto a juego o una sombra oscura. Si de verdad necesitas texto blanco, cambia el fondo pastel por un color intenso.
- Texto pastel sobre fondo pastel: una etiqueta celeste sobre un panel rosa es claro sobre claro y el contraste casi desaparece. Deja las superficies a los pasteles y el texto a un color intenso.
- Juzgar por el número de saturación HSL: el HSL de #FFCAE0 es hsl(335 100% 89.6%), con una saturación del 100 %, porque la saturación HSL se calcula aparte de la luminosidad. Para saber si algo es un pastel, mira la saturación HSV (21 % en este color) o la proporción de blanco en HWB (79 %).
- Colores apagados por mezclar gris: añadir gris en vez de blanco sube el negro en HWB y da esos tonos sobrios y empolvados. También se usan mucho, pero son otra familia, y al combinarlos con el resultado de este generador uno de los lados puede verse apagado.
- Un tono distinto en cada familia: un amarillo pálido junto a un morado nítido hace que solo destaque el morado. Si usas varias familias, fija un único tono y saca los colores con él para que la paleta quede ordenada.
- Imprimir los colores de pantalla tal cual: un pastel en el monitor está hecho de luz y en papel puede salir más apagado o más amarillento. Para impresos, compáralo con las muestras CMYK de la imprenta o haz una prueba de impresión.
Limitaciones y advertencias
- No existe una norma internacional oficial de «pastel». El rango de este generador (un 58-93 % de blanco mezclado con el color puro) es una decisión de diseño para cubrir lo que se suele llamar pastel, y otras herramientas pueden definirlo de otra manera.
- Todos los colores son para pantallas sRGB. En un monitor de gama amplia, o con el modo nocturno o la corrección de color del móvil activados, el mismo código puede verse distinto.
- La mezcla es el reparto de un color de pantalla en HWB. No es la cantidad real de pintura o de lápiz de color, así que úsala solo como referencia para materiales de arte y confirma con una muestra de prueba.
- El contraste mide solo la diferencia de luminosidad entre el texto y el fondo. Si una persona con deficiencia de visión del color distingue dos pasteles es algo que hay que comprobar por separado.
- Sacar nuevos usa números aleatorios del navegador, así que con la misma configuración sale una combinación distinta cada vez. Guarda la que te guste con Copiar enlace o Guardar PNG.
Base: los colores se calculan con las definiciones de OKLab y HWB de W3C CSS Color 4 (borrador de recomendación candidata del 20 de octubre de 2026) y el contraste, con la fórmula de luminancia relativa de WCAG 2.2 (recomendación del 12 de diciembre de 2024). Los códigos y contrastes de las tablas se calcularon con este generador el 21 de octubre de 2026.
Fuentes
- 01W3C — CSS Color Module Level 4, 8. HWB ColorsLa notación hwb() describe un color por la cantidad de blanco y de negro mezclada con un tono; gris cuando blanco más negro llega al 100 % o más
- 02W3C — CSS Color Module Level 4, 9.2 Oklab and OkLChLos espacios OKLab y OKLCH usados para el mapa y la generación, y la sección 14 sobre ajuste de gama (reducir el croma hasta caber en sRGB)
- 03W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)4,5:1 para texto normal, 3:1 para texto grande, 7:1 en 1.4.6 y la fórmula del contraste
- 04Björn Ottosson — A perceptual color space for image processingDefinición del espacio de color OKLab y sus matrices de conversión
- 05Wikipedia — Pastel (color)Define el pastel como una tonalidad con un valor alto y una saturación baja a media
Preguntas frecuentes
¿Qué es un color pastel?
Un pastel es un color puro aclarado con mucho blanco hasta que se ve pálido y suave. En el espacio de color HSV tiene un valor alto y una saturación baja a media. Por ejemplo, #FFCAE0 es un 21 % del color puro #FF006A más un 79 % de blanco, y los pasteles que saca este generador llevan entre un 58 y un 93 % de blanco.
¿Dónde puedo usar los códigos de color pastel?
Copia un código HEX (#FFCAE0), RGB, HSL, HWB u OKLCH y pégalo en cualquier sitio que acepte un código de color, como el CSS de una web, Figma, Photoshop, PowerPoint o Canva. Copiar variables CSS te da una variable por cada color, incluido su texto a juego.
¿Puedo quedarme con los colores que me gustan y cambiar el resto?
Sí. Haz clic en el candado bajo una tarjeta para fijar ese color y pulsa Sacar nuevos o la barra espaciadora. Los colores fijados se quedan y solo se vuelven a sacar los demás. Soltar todos quita todos los candados a la vez.
¿Cómo convierto el color de mi marca en pastel?
Escríbelo en el campo Convertir mi color en pastel como #2563EB, rgb(37 99 235) o royalblue y elige Poner en la casilla elegida. Se mantiene el tono y se aplica la nitidez del tono actual, así que con el tono Suave #2563EB pasa a ser #C7DBFF. Un color que ya es un pastel claro conserva casi la misma luminosidad.
¿Puedo poner texto blanco sobre un fondo pastel?
No lo recomendamos. Calculamos los 36.360 pasteles del mapa del generador: incluso el mejor da al texto blanco solo 1,8:1, por debajo del 4,5:1 que WCAG 2.2 pide para el texto normal y hasta del 3:1 del texto grande. El texto a juego, más oscuro y del mismo tono, llega al menos a 6,1:1 sobre cualquier pastel.
¿En qué se diferencian Pálido, Suave y Nítido?
En la cantidad de blanco. La nitidez de 0 a 29 es Pálido (alrededor de un 76-93 % de blanco), de 30 a 64 es Suave (un 67-87 %) y de 65 a 100 es Nítido (un 58-80 %), mientras que Mezcla saca colores de todo el rango de 0 a 100. Pálido va bien para fondos amplios, y Nítido, para ilustraciones y formas pequeñas.
¿Por qué el pastel amarillo parece más blanco que los demás?
Porque el amarillo puro ya es muy luminoso. En luminosidad OKLCH, el amarillo puro ronda el 91 % y el morado puro el 53 %, así que con el mismo tono el pastel amarillo se ve casi blanco. Oscurecer el amarillo para hacerlo más intenso lo vuelve color mostaza y apagado, por lo que conviene más el tono Nítido.
¿Cómo guardo o comparto la paleta que he creado?
Copiar todos los HEX te da la lista de códigos y Guardar PNG, una imagen de 1200 × 630. Copiar enlace pone en la dirección los colores, los candados, la familia y el tono, para que otra persona abra la misma paleta. Los colores que escribes no se envían a ningún servidor: todo se calcula en tu navegador.