Color con nombre · #126366
Caribbean Swim
Caribbean Swim es #126366: rgb(18 99 102), hsl(182 70% 24%), oklch(0.456 0.072 198.8). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Teal mean? → · Caribbean Swim color name →
#126366
oklch(0.456 0.072 198.8)
Conversiones de color
- HEX
- #126366
- RGB
- rgb(18 99 102)
- HSL
- hsl(182 70% 24%)
- HWB
- hwb(182 7% 60%)
- OKLCH
- oklch(0.456 0.072 198.8)
- OKLab
- oklab(0.456 -0.068 -0.023)
- CIE Lab
- lab(37.63 -22.9 -8.78)
- LCH
- lch(37.63 24.53 201)
- CMYK
- cmyk(82% 3% 0% 60%)
Tintes · Sombras · Tonos
Tintes
- 327274
- 4A8183
- 619091
- 779FA0
- 8DAEB0
- A4BEBF
- BACECF
- D1DEDF
- E8EFEF
Sombras
- 0E5558
- 0A474A
- 073A3C
- 042E2F
- 022123
- 011617
- 010B0C
- 000304
- 000000
Tonos
- 256669
- 32696B
- 3E6C6E
- 496F70
- 537273
- 5C7576
- 657878
- 6E7A7B
- 777D7D
Armonías de color
Complementario +180°
- 126366
Caribbean Swim
- 7A4647
≈ Bold Sangria
Análogo -30° +30°
- 126366
Caribbean Swim
- 266450
≈ Embracing
- 235E77
≈ Nautical Creatures
Triádico +120° +240°
- 126366
Caribbean Swim
- 684A71
≈ Clary
- 6D5224
≈ Field Drab
Complementario dividido +150° +210°
- 126366
Caribbean Swim
- 75465D
≈ Bewitching
- 784A32
≈ Witch Wood
Tetrádico +90° +180° +270°
- 126366
Caribbean Swim
- 56507D
≈ Tangent Periwinkle
- 7A4647
≈ Bold Sangria
- 5A5A27
≈ Saratoga
Contraste y accesibilidad
Ag
AASobre blanco
WCAG 6.99:1 · APCA Lc 84
Ag
FailSobre negro
WCAG 3.00:1 · APCA Lc 18
Mejor color de texto: #FFFFFF
WCAG 6.99:1 (AA) · APCA Lc 84
Contrast pairs
Fragmentos de código
CSS
:root {
--caribbean-swim: #126366;
--caribbean-swim-rgb: 18 99 102;
--caribbean-swim-oklch: oklch(0.456 0.072 198.8);
}
.element {
color: var(--caribbean-swim);
background-color: hsl(182 70% 24%);
border-color: oklch(0.456 0.072 198.8);
}Tailwind CSS v4
@theme {
--color-caribbean-swim: #126366;
--color-caribbean-swim-50: #defcfe;
--color-caribbean-swim-100: #cdf0f2;
--color-caribbean-swim-200: #b1dee1;
--color-caribbean-swim-300: #8bc3c6;
--color-caribbean-swim-400: #68acae;
--color-caribbean-swim-500: #439598;
--color-caribbean-swim-600: #3a7e81;
--color-caribbean-swim-700: #2e6567;
--color-caribbean-swim-800: #204a4b;
--color-caribbean-swim-900: #153334;
--color-caribbean-swim-950: #061f1f;
}SCSS
$caribbean-swim: #126366;
$caribbean-swim-rgb: 18, 99, 102;
$caribbean-swim-light: mix(#fff, $caribbean-swim, 20%);
$caribbean-swim-dark: mix(#000, $caribbean-swim, 20%);
.element {
color: $caribbean-swim;
box-shadow: 0 0 0 2px rgba($caribbean-swim, 0.35);
}