Nazwany kolor · #00FDFF
Fluorescent Turquoise
Fluorescent Turquoise to #00FDFF: rgb(0 253 255), hsl(180 100% 50%), oklch(0.901 0.154 195.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Fluorescent Turquoise color name →
#00FDFF
oklch(0.901 0.154 195.8)
Konwersje koloru
- HEX
- #00fdff
- RGB
- rgb(0 253 255)
- HSL
- hsl(180 100% 50%)
- HWB
- hwb(180 0% 0%)
- OKLCH
- oklch(0.901 0.154 195.8)
- OKLab
- oklab(0.901 -0.148 -0.042)
- CIE Lab
- lab(90.08 -49.91 -15.83)
- LCH
- lch(90.08 52.36 197.6)
- CMYK
- cmyk(100% 1% 0% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 4FFEFF
- 70FEFF
- 88FFFF
- 9EFFFF
- B1FFFF
- C2FFFF
- D2FFFF
- E2FFFF
- F1FFFF
Odcienie ciemniejsze
- 00DCDE
- 00BCBE
- 009D9E
- 007F80
- 006263
- 004748
- 002D2E
- 001616
- 000303
Tony
- 3AF0F2
- 50E3E4
- 5ED7D7
- 68CACA
- 70BEBE
- 76B1B1
- 7AA5A5
- 7D9898
- 7F8C8C
Harmonie kolorów
Komplementarna +180°
- 00FDFF
Fluorescent Turquoise
- FFD1D3
≈ Love Fumes
Analogowa -30° +30°
- 00FDFF
Fluorescent Turquoise
- 64FEC6
≈ Rare Wind
- B1E8FF
≈ Frozen Landscape
Triada +120° +240°
- 00FDFF
Fluorescent Turquoise
- F1D0FF
≈ Rose Dragée
- FFD79F
≈ Blushing Peach
Komplementarna rozszczepiona +150° +210°
- 00FDFF
Fluorescent Turquoise
- FFCEE7
≈ Classic Rose
- FFD4C0
≈ Simply Delicious
Tetrada +90° +180° +270°
- 00FDFF
Fluorescent Turquoise
- DBDAFF
≈ Transparent Blue
- FFD1D3
≈ Love Fumes
- ECE45E
≈ Celandine
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.27:1 · APCA Lc 13
Ag
AAANa czerni
WCAG 16.49:1 · APCA Lc 91
Najlepszy kolor tekstu: #000000
WCAG 16.49:1 (AAA) · APCA Lc 91
Contrast pairs
Fragmenty kodu
CSS
:root {
--fluorescent-turquoise: #00fdff;
--fluorescent-turquoise-rgb: 0 253 255;
--fluorescent-turquoise-oklch: oklch(0.901 0.154 195.8);
}
.element {
color: var(--fluorescent-turquoise);
background-color: hsl(180 100% 50%);
border-color: oklch(0.901 0.154 195.8);
}Tailwind CSS v4
@theme {
--color-fluorescent-turquoise: #00fdff;
--color-fluorescent-turquoise-50: #c2ffff;
--color-fluorescent-turquoise-100: #aaf8fa;
--color-fluorescent-turquoise-200: #7de9ec;
--color-fluorescent-turquoise-300: #33cfd3;
--color-fluorescent-turquoise-400: #00b9bc;
--color-fluorescent-turquoise-500: #00a3a7;
--color-fluorescent-turquoise-600: #008a8d;
--color-fluorescent-turquoise-700: #006e71;
--color-fluorescent-turquoise-800: #005252;
--color-fluorescent-turquoise-900: #003939;
--color-fluorescent-turquoise-950: #002323;
}SCSS
$fluorescent-turquoise: #00fdff;
$fluorescent-turquoise-rgb: 0, 253, 255;
$fluorescent-turquoise-light: mix(#fff, $fluorescent-turquoise, 20%);
$fluorescent-turquoise-dark: mix(#000, $fluorescent-turquoise, 20%);
.element {
color: $fluorescent-turquoise;
box-shadow: 0 0 0 2px rgba($fluorescent-turquoise, 0.35);
}