Nazwany kolor · #00EEDD
Frozen Boubble
Frozen Boubble to #00EEDD: rgb(0 238 221), hsl(176 100% 47%), oklch(0.854 0.15 185.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Frozen Boubble color name →
#00EEDD
oklch(0.854 0.15 185.7)
Konwersje koloru
- HEX
- #00eedd
- RGB
- rgb(0 238 221)
- HSL
- hsl(176 100% 47%)
- HWB
- hwb(176 0% 7%)
- OKLCH
- oklch(0.854 0.15 185.7)
- OKLab
- oklab(0.854 -0.149 -0.015)
- CIE Lab
- lab(84.83 -51.81 -5.94)
- LCH
- lch(84.83 52.15 186.5)
- CMYK
- cmyk(100% 0% 7% 7%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 4CF0E0
- 6CF2E4
- 84F4E7
- 9AF6EB
- ADF8EE
- BFF9F1
- D0FBF5
- E0FCF8
- F0FEFC
Odcienie ciemniejsze
- 00CFC0
- 00B1A4
- 009388
- 00776E
- 005C55
- 00423D
- 002A26
- 001411
- 000302
Tony
- 38E3D3
- 4DD8CA
- 5BCCC0
- 65C1B7
- 6DB6AD
- 73ABA4
- 78A19B
- 7C9692
- 7E8B89
Harmonie kolorów
Komplementarna +180°
- 00EEDD
Frozen Boubble
- FFB9C7
≈ Cherry Blossom Pink
Analogowa -30° +30°
- 00EEDD
Frozen Boubble
- 72ECA5
≈ Screen Glow
- 67E2FF
≈ Athena Blue
Triada +120° +240°
- 00EEDD
Frozen Boubble
- DDC0FF
≈ Jane Purple
- FFC183
≈ Buttery
Komplementarna rozszczepiona +150° +210°
- 00EEDD
Frozen Boubble
- FFB2EC
≈ Hermosa Pink
- FFBDAB
≈ Egyptian Javelin
Tetrada +90° +180° +270°
- 00EEDD
Frozen Boubble
- C1CCFF
≈ Lavender Blue
- FFB9C7
≈ Cherry Blossom Pink
- EDCE4A
≈ Montezuma Gold
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.47:1 · APCA Lc 22
Ag
AAANa czerni
WCAG 14.27:1 · APCA Lc 82
Najlepszy kolor tekstu: #000000
WCAG 14.27:1 (AAA) · APCA Lc 82
Contrast pairs
Fragmenty kodu
CSS
:root {
--frozen-boubble: #00eedd;
--frozen-boubble-rgb: 0 238 221;
--frozen-boubble-oklch: oklch(0.854 0.15 185.7);
}
.element {
color: var(--frozen-boubble);
background-color: hsl(176 100% 47%);
border-color: oklch(0.854 0.15 185.7);
}Tailwind CSS v4
@theme {
--color-frozen-boubble: #00eedd;
--color-frozen-boubble-50: #c4fffd;
--color-frozen-boubble-100: #adf9f1;
--color-frozen-boubble-200: #83e9e0;
--color-frozen-boubble-300: #41d0c5;
--color-frozen-boubble-400: #00baab;
--color-frozen-boubble-500: #00a494;
--color-frozen-boubble-600: #008a7d;
--color-frozen-boubble-700: #006f64;
--color-frozen-boubble-800: #005248;
--color-frozen-boubble-900: #003932;
--color-frozen-boubble-950: #00231e;
}SCSS
$frozen-boubble: #00eedd;
$frozen-boubble-rgb: 0, 238, 221;
$frozen-boubble-light: mix(#fff, $frozen-boubble, 20%);
$frozen-boubble-dark: mix(#000, $frozen-boubble, 20%);
.element {
color: $frozen-boubble;
box-shadow: 0 0 0 2px rgba($frozen-boubble, 0.35);
}