Paleta de colores Breakwater and Seaglass
Breakwater and Seaglass es una paleta de 5 colores que se apoya en azules, verdes azulados y cianes y neutros. En OKLCH, su luminosidad va del 34% (#223957, oscuro) al 97% (#F2F7F5, muy claro), y su color más saturado, #2CA58D, es moderadamente saturado. 4 de sus 4 colores cromáticos están en el lado frío de la rueda cromática. 3 de sus 10 pares de colores alcanzan la relación WCAG AA de 4.5:1 para texto corrido. Está etiquetada como océano, naturaleza, verde azulado, azules y apagados.
- Prussian Blue #223957
- Steel Blue #416088
- Persian Green #2CA58D
- Celeste #8CD3DD
- Seashell #F2F7F5
Códigos de color
| Color | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Prussian Blue | #223957 | rgb(34, 57, 87) | hsl(214, 44%, 24%) | oklch(34.1% 0.061 255.6) |
| Steel Blue | #416088 | rgb(65, 96, 136) | hsl(214, 35%, 39%) | oklch(48.3% 0.075 255.2) |
| Persian Green | #2CA58D | rgb(44, 165, 141) | hsl(168, 58%, 41%) | oklch(65.1% 0.11 176.1) |
| Celeste | #8CD3DD | rgb(140, 211, 221) | hsl(187, 54%, 71%) | oklch(82.3% 0.072 207) |
| Seashell | #F2F7F5 | rgb(242, 247, 245) | hsl(156, 24%, 96%) | oklch(97.2% 0.006 170.4) |
Accesibilidad
Los mejores pares de texto y fondo de Breakwater and Seaglass, según la relación de contraste WCAG 2, con el contraste de luminosidad APCA (Lc) del texto sobre su fondo.
| Par | WCAG 2 | Nivel | APCA Lc |
|---|---|---|---|
| #F2F7F5 sobre #223957 | 10.83:1 | AAA | Lc -94.4 |
| #8CD3DD sobre #223957 | 6.97:1 | AA | Lc -65.6 |
| #F2F7F5 sobre #416088 | 5.96:1 | AA | Lc -81.0 |
Visión del color
Ningún par de colores queda a menos de ΔE 0.06 de otro bajo protanopía, deuteranopía, tritanopía o acromatopsia.
Protanopía
Deuteranopía
Tritanopía
Acromatopsia
Úsala en tu código
Instala estos colores como colores de tema de Tailwind CSS v4 con shadcn: npx shadcn@latest add https://getcolors.so/r/palette/223957-416088-2ca58d-8cd3dd-f2f7f5.json.
Hazla tuya
Edita los colores, crea con ellos un sistema de color completo en modo claro y oscuro, o míralos en una interfaz real.