Color con nombre · #66EEBB
Onsen
Onsen es #66EEBB: rgb(102 238 187), hsl(158 80% 67%), oklch(0.86 0.14 165.6). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Green mean? → · Onsen color name →
#66EEBB
oklch(0.86 0.14 165.6)
Conversiones de color
- HEX
- #66eebb
- RGB
- rgb(102 238 187)
- HSL
- hsl(158 80% 67%)
- HWB
- hwb(158 40% 7%)
- OKLCH
- oklch(0.86 0.14 165.6)
- OKLab
- oklab(0.86 -0.136 0.035)
- CIE Lab
- lab(85.64 -47.88 13.08)
- LCH
- lch(85.64 49.63 164.7)
- CMYK
- cmyk(57% 0% 21% 7%)
Tintes · Sombras · Tonos
Tintes
- 7BF0C2
- 8DF2C8
- 9EF4CF
- ADF6D6
- BCF8DD
- CAF9E4
- D8FBEA
- E5FCF1
- F2FEF8
Sombras
- 58CFA2
- 4AB18A
- 3C9373
- 2F775C
- 235C46
- 174232
- 0C2A1F
- 04140D
- 000302
Tonos
- 6DE3B5
- 73D7AF
- 77CCA9
- 7AC1A3
- 7DB69D
- 7FAB97
- 80A091
- 80968C
- 808B86
Armonías de color
Complementario +180°
- 66EEBB
Onsen
- FFB8DF
≈ Bubblegum Heart
Análogo -30° +30°
Triádico +120° +240°
- 66EEBB
Onsen
- CCCBFF
≈ Lavender Blue
- FFC1A5
≈ Sweet Apricot
Complementario dividido +150° +210°
- 66EEBB
Onsen
- EBBDFF
≈ Euphoria
- FFBDC0
≈ Peach Scone
Tetrádico +90° +180° +270°
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.44:1 · APCA Lc 21
Ag
AAASobre negro
WCAG 14.51:1 · APCA Lc 82
Mejor color de texto: #000000
WCAG 14.51:1 (AAA) · APCA Lc 82
Contrast pairs
Fragmentos de código
CSS
:root {
--onsen: #66eebb;
--onsen-rgb: 102 238 187;
--onsen-oklch: oklch(0.86 0.14 165.6);
}
.element {
color: var(--onsen);
background-color: hsl(158 80% 67%);
border-color: oklch(0.86 0.14 165.6);
}Tailwind CSS v4
@theme {
--color-onsen: #66eebb;
--color-onsen-50: #cfffed;
--color-onsen-100: #bbf8df;
--color-onsen-200: #97e8c8;
--color-onsen-300: #66cea9;
--color-onsen-400: #2fb88a;
--color-onsen-500: #00a26f;
--color-onsen-600: #00895e;
--color-onsen-700: #006e4b;
--color-onsen-800: #005134;
--color-onsen-900: #003824;
--color-onsen-950: #002313;
}SCSS
$onsen: #66eebb;
$onsen-rgb: 102, 238, 187;
$onsen-light: mix(#fff, $onsen, 20%);
$onsen-dark: mix(#000, $onsen, 20%);
.element {
color: $onsen;
box-shadow: 0 0 0 2px rgba($onsen, 0.35);
}