Nazwany kolor · #6FEBE3
Blue Crystal Landscape
Blue Crystal Landscape to #6FEBE3: rgb(111 235 227), hsl(176 76% 68%), oklch(0.867 0.112 189.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Blue Crystal Landscape color name →
#6FEBE3
oklch(0.867 0.112 189.6)
Konwersje koloru
- HEX
- #6febe3
- RGB
- rgb(111 235 227)
- HSL
- hsl(176 76% 68%)
- HWB
- hwb(176 44% 8%)
- OKLCH
- oklch(0.867 0.112 189.6)
- OKLab
- oklab(0.867 -0.11 -0.019)
- CIE Lab
- lab(85.88 -37.67 -7.28)
- LCH
- lch(85.88 38.37 190.9)
- CMYK
- cmyk(53% 0% 3% 8%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 82EDE6
- 93EFE9
- A2F2EB
- B1F4EE
- BFF6F1
- CCF8F4
- DAFAF7
- E6FBF9
- F3FDFC
Odcienie ciemniejsze
- 60CCC5
- 51AEA8
- 42918C
- 347571
- 275B57
- 1A413F
- 0E2927
- 041312
- 010303
Tony
- 74E0D9
- 78D5CE
- 7CCAC4
- 7EBFBA
- 80B5B0
- 81AAA6
- 819F9D
- 819593
- 818A89
Harmonie kolorów
Komplementarna +180°
- 6FEBE3
Blue Crystal Landscape
- FFC0C9
≈ Pink
Analogowa -30° +30°
- 6FEBE3
Blue Crystal Landscape
- 8FEABA
≈ Teal Deer
- 86E3FF
≈ Tranquil Pool
Triada +120° +240°
- 6FEBE3
Blue Crystal Landscape
- E5C4FF
≈ Jane Purple
- FFC888
≈ Lazy Sun
Komplementarna rozszczepiona +150° +210°
- 6FEBE3
Blue Crystal Landscape
- FFBBE8
≈ Pink Quartz
- FFC4AF
≈ Gadabout
Tetrada +90° +180° +270°
- 6FEBE3
Blue Crystal Landscape
- CACFFF
≈ Lavender Blue
- FFC0C9
≈ Pink
- E5D57C
≈ Gold Winged
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.43:1 · APCA Lc 20
Ag
AAANa czerni
WCAG 14.66:1 · APCA Lc 83
Najlepszy kolor tekstu: #000000
WCAG 14.66:1 (AAA) · APCA Lc 83
Contrast pairs
Fragmenty kodu
CSS
:root {
--blue-crystal-landscape: #6febe3;
--blue-crystal-landscape-rgb: 111 235 227;
--blue-crystal-landscape-oklch: oklch(0.867 0.112 189.6);
}
.element {
color: var(--blue-crystal-landscape);
background-color: hsl(176 76% 68%);
border-color: oklch(0.867 0.112 189.6);
}Tailwind CSS v4
@theme {
--color-blue-crystal-landscape: #6febe3;
--color-blue-crystal-landscape-50: #d2fffd;
--color-blue-crystal-landscape-100: #bdf4f1;
--color-blue-crystal-landscape-200: #9be4e0;
--color-blue-crystal-landscape-300: #6dcac6;
--color-blue-crystal-landscape-400: #38b3ac;
--color-blue-crystal-landscape-500: #009d96;
--color-blue-crystal-landscape-600: #00857f;
--color-blue-crystal-landscape-700: #006a66;
--color-blue-crystal-landscape-800: #004e49;
--color-blue-crystal-landscape-900: #003733;
--color-blue-crystal-landscape-950: #00211e;
}SCSS
$blue-crystal-landscape: #6febe3;
$blue-crystal-landscape-rgb: 111, 235, 227;
$blue-crystal-landscape-light: mix(#fff, $blue-crystal-landscape, 20%);
$blue-crystal-landscape-dark: mix(#000, $blue-crystal-landscape, 20%);
.element {
color: $blue-crystal-landscape;
box-shadow: 0 0 0 2px rgba($blue-crystal-landscape, 0.35);
}