Ocean #017B92
Ocean es un turquesa o cian medio-oscuro y moderadamente saturado, con código hex #017B92 y RGB rgb(1, 123, 146).
Aa
El texto blanco es el que mejor se lee sobre este color (4.94:1).
Sobre este color
#017B92 es un turquesa o cian medio-oscuro y moderadamente saturado. En OKLCH, su luminosidad es 54%, su croma 0.096 y su matiz 217°. Su matiz está del lado frío de la rueda cromática. Es el color con nombre Ocean. El texto blanco es el que mejor se lee sobre este color, con 4.94:1.
| Familia de matiz | Turquesas y cianes |
| Luminosidad | medio-oscuro (54%) |
| Croma | moderadamente saturado (0.096) |
| Temperatura | frío |
| Nombre más cercano | Ocean |
| Texto negro | 4.24:1 |
| Texto blanco | 4.94:1 |
Colores que combinan con Ocean
Combinaciones obtenidas al rotar Ocean por la rueda de matiz de OKLCH, cada una con el nombre más cercano de nuestra lista.
Complementario
El matiz opuesto (180°).
Análogo
Matices vecinos, 30° a cada lado.
Triádico
Tres matices separados por 120°.
Paletas de colores con Ocean
Paletas seleccionadas que contienen un color a menos de ΔE 0.06 (OKLab) de Ocean, de la más cercana a la más lejana.
Colores con nombre similares
Los ocho colores con nombre más cercanos a Ocean, con su distancia ΔE.
- Sea Blue #047495 ΔE 0.023
- Deep Aqua #08787F ΔE 0.030
- Teal #008080 ΔE 0.037
- Ocean Blue #03719C ΔE 0.038
- Bluegreen #017A79 ΔE 0.040
- Teal Blue #01889F ΔE 0.040
- Cerulean #457B9D ΔE 0.042
- Muted Blue #3B719F ΔE 0.048
Más sobre Ocean
Cómo hacer Ocean
Una receta inicial con colores de pintura comunes, calculada con un modelo espectral de pintura (el modo pintura del mezclador). Los pigmentos reales varían: mezcla primero una pequeña prueba y ajusta.
- 2 partes de azul
- 1 parte de verde
- 1 parte de blanco
Resultado de la receta: #2D7D91, una diferencia de ΔE 0.018 respecto a Ocean. Es muy parecido: la mayoría de la gente no notará la diferencia.
Códigos de Ocean en todos los formatos
| HEX | #017B92 |
| RGB | rgb(1, 123, 146) |
| HSL | hsl(190, 99%, 29%) |
| OKLCH | oklch(53.8% 0.096 216.9) |
Contraste
Las relaciones de contraste de WCAG 2 son el objetivo de conformidad: AA exige 4.5:1 para texto de cuerpo y 3:1 para texto grande; AAA exige 7:1. Los valores Lc de APCA son una guía complementaria de los borradores de WCAG 3.
| Combinación | WCAG 2 | Resultado | APCA | Guía APCA |
|---|---|---|---|---|
| Texto blanco sobre #017B92 | 4.94:1 | AA | Lc -79.1 | Bueno para texto de cuerpo |
| Texto negro sobre #017B92 | 4.24:1 | AA texto grande | Lc 30.4 | Elementos que no son texto, texto de marcador de posición |
| Texto #017B92 sobre blanco | 4.94:1 | AA | Lc 73.6 | Texto de contenido, no para lecturas largas |
| Texto #017B92 sobre negro | 4.24:1 | AA texto grande | Lc -28.1 | Solo divisores y decoración |
Tonos y tintes de Ocean
Una escala de 50 a 950 creada en OKLCH: el matiz se mantiene, la luminosidad sigue una curva parecida a la de Tailwind v4 y cada paso permanece dentro de la gama sRGB. Este color está en el paso 600.
-
Paso 50
50
#F1F6F8
oklch(97% 0.006 223.5)
-
Paso 100
100
#E1ECEF
oklch(93.6% 0.012 215.8)
-
Paso 200
200
#C8DDE3
oklch(88.4% 0.024 216.7)
-
Paso 300
300
#A2C8D3
oklch(80.9% 0.043 217.3)
-
Paso 400
400
#6DACBD
oklch(70.8% 0.069 216.8)
-
Paso 500
500
#4097AC
oklch(63.2% 0.088 216.3)
-
Paso 600
600 (este color)
#017B92
oklch(53.8% 0.096 216.9)
-
Paso 700
700
#006C81
oklch(49% 0.088 217.4)
-
Paso 800
800
#085869
oklch(42.6% 0.074 217.5)
-
Paso 900
900
#154955
oklch(37.7% 0.057 216.3)
-
Paso 950
950
#0E2B32
oklch(27.1% 0.037 216.1)
Exporta esta escala para Tailwind con la herramienta de colores de Tailwind
Ocean con daltonismo
Simulado con el modelo de Machado et al. (2009). ΔE es cuánto se desplaza el color: por debajo de 0.02 aproximadamente no notarías el cambio.
| Visión | Se ve como | Cambio (ΔE) |
|---|---|---|
| Protanopía (sin conos rojos) | #6C7793 | 0.083 |
| Deuteranopía (sin conos verdes) | #5B6B92 | 0.074 |
| Tritanopía (sin conos azules) | #008382 | 0.041 |
| Acromatopsia (sin color) | #707070 | 0.096 |
Usa Ocean en tu producto
Conviértelo en roles de interfaz claros y oscuros con el contraste verificado y expórtalos a Tailwind v4, shadcn/ui, CSS o design tokens.