Paletas de colores predefinidas
Una selección de paletas de 5 colores, listas para copiar como códigos hexadecimales. Cada una muestra la relación de contraste entre su color más claro y el más oscuro, para que sepas de un vistazo si permiten que el texto sea legible.
Abrir la herramienta →Sunset BeachAA 5.7:1
#003f5c, #58508d, #bc5090, #ff6361, #ffa600Forest FloorAA 6.0:1
#264653, #2a9d8f, #e9c46a, #f4a261, #e76f51Ocean BreezeAAA 14.7:1
#03045e, #0077b6, #00b4d8, #90e0ef, #caf0f8Autumn LeavesAA 5.1:1
#582f0e, #7f4f24, #936639, #a68a64, #b6ad90Minimal MonoAAA 14.6:1
#212529, #495057, #adb5bd, #dee2e6, #f8f9faEarth TonesAA 6.3:1
#344e41, #3a5a40, #588157, #a3b18a, #dad7cdCandy Pop3.4:1
#ff006e, #fb5607, #ffbe0b, #8338ec, #3a86ffNordic FrostAAA 13.2:1
#0d1b2a, #1b263b, #415a77, #778da9, #e0e1ddDesert SandAA 6.6:1
#603813, #8d5524, #c68642, #e0ac69, #edc9afCoral ReefAAA 7.7:1
#390099, #9e0059, #ff0054, #ff5400, #ffbd00Sage GardenAAA 12.2:1
#283618, #606c38, #bc6c25, #dda15e, #fefae0CyberpunkAA 6.2:1
#3a0ca3, #7209b7, #f72585, #4cc9f0, #4361eePastel Dream1.7:1
#ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ffDeep Space3.5:1
#03071e, #370617, #6a040f, #9d0208, #d00000Berry SmoothieAAA 7.8:1
#3c096c, #5a189a, #9d4edd, #c77dff, #e0aaffMidnight GoldAAA 14.1:1
#03071e, #370617, #6a040f, #dda15e, #ffd60aPreguntas frecuentes
- ¿Cómo uso una de estas paletas?
- Haz clic en una muestra (o en su botón de copiar) para copiar los 5 códigos hexadecimales como una lista separada por comas y pégalos en tus variables CSS, tu herramienta de diseño o la herramienta de color de abajo.
- ¿Qué significa la etiqueta (p. ej., AAA 12.6:1)?
- Es la relación de contraste WCAG entre el color más claro y el más oscuro de la paleta, la mejor combinación posible de texto y fondo que puedes crear con ella. AAA indica 7:1 o más; AA, 4.5:1 o más. Si solo aparece la relación, no alcanza ninguno de los dos niveles.
- ¿Puedo comprobar otras parejas de colores de una paleta?
- Sí. Copia dos códigos hexadecimales cualesquiera en la herramienta de contraste para comprobar una combinación concreta de texto y fondo, además de la pareja más clara y más oscura que se muestra aquí.
- ¿Se sube algún dato o se hace seguimiento?
- No. Esta página y la herramienta de color funcionan por completo en tu navegador; no se envía nada a ningún sitio.