Nazwany kolor · #B5E4E4
Seascape Green
Seascape Green to #B5E4E4: rgb(181 228 228), hsl(180 47% 80%), oklch(0.886 0.048 196.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Seascape Green color name →
#B5E4E4
oklch(0.886 0.048 196.3)
Konwersje koloru
- HEX
- #b5e4e4
- RGB
- rgb(181 228 228)
- HSL
- hsl(180 47% 80%)
- HWB
- hwb(180 71% 11%)
- OKLCH
- oklch(0.886 0.048 196.3)
- OKLab
- oklab(0.886 -0.047 -0.014)
- CIE Lab
- lab(87.29 -15.7 -5.27)
- LCH
- lch(87.29 16.56 198.5)
- CMYK
- cmyk(21% 0% 0% 11%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- BDE7E7
- C4E9E9
- CCECEC
- D3EFEF
- DBF2F1
- E2F4F4
- E9F7F7
- F0FAFA
- F8FCFC
Odcienie ciemniejsze
- 9DC6C6
- 86A9A9
- 6F8D8D
- 597272
- 445858
- 303F3F
- 1D2828
- 0C1212
- 020303
Tony
- B0DADA
- ABCFCF
- A5C5C5
- A0BBBB
- 9BB1B1
- 96A7A7
- 909D9D
- 8B9393
- 858A8A
Harmonie kolorów
Komplementarna +180°
- B5E4E4
Seascape Green
- F8CDCE
≈ Strawberry Ripple
Analogowa -30° +30°
- B5E4E4
Seascape Green
- BCE4D2
≈ Beru
- B9E1F2
≈ Bellagio Fountains
Triada +120° +240°
- B5E4E4
Seascape Green
- E6D0EF
≈ Lavender Princess
- ECD6B6
≈ Sugared Pears
Komplementarna rozszczepiona +150° +210°
- B5E4E4
Seascape Green
- F3CDE0
≈ Minimal Rose
- F6D0BF
≈ Sand Island
Tetrada +90° +180° +270°
- B5E4E4
Seascape Green
- D6D5F9
≈ Flax Bloom
- F8CDCE
≈ Strawberry Ripple
- DDDCB8
≈ Beach Grass
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.38:1 · APCA Lc 19
Ag
AAANa czerni
WCAG 15.18:1 · APCA Lc 85
Najlepszy kolor tekstu: #000000
WCAG 15.18:1 (AAA) · APCA Lc 85
Contrast pairs
Fragmenty kodu
CSS
:root {
--seascape-green: #b5e4e4;
--seascape-green-rgb: 181 228 228;
--seascape-green-oklch: oklch(0.886 0.048 196.3);
}
.element {
color: var(--seascape-green);
background-color: hsl(180 47% 80%);
border-color: oklch(0.886 0.048 196.3);
}Tailwind CSS v4
@theme {
--color-seascape-green: #b5e4e4;
--color-seascape-green-50: #e6fafa;
--color-seascape-green-100: #d6edee;
--color-seascape-green-200: #bddbdc;
--color-seascape-green-300: #9bbfc0;
--color-seascape-green-400: #7da8a8;
--color-seascape-green-500: #5f9091;
--color-seascape-green-600: #517a7a;
--color-seascape-green-700: #406262;
--color-seascape-green-800: #2e4847;
--color-seascape-green-900: #1f3231;
--color-seascape-green-950: #0f1e1d;
}SCSS
$seascape-green: #b5e4e4;
$seascape-green-rgb: 181, 228, 228;
$seascape-green-light: mix(#fff, $seascape-green, 20%);
$seascape-green-dark: mix(#000, $seascape-green, 20%);
.element {
color: $seascape-green;
box-shadow: 0 0 0 2px rgba($seascape-green, 0.35);
}