Couleur nommée · #22FFFF
Crisp Cyan
Crisp Cyan correspond à #22FFFF : rgb(34 255 255), hsl(180 100% 57%), oklch(0.907 0.151 194.8). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Teal mean? → · Crisp Cyan color name →
#22FFFF
oklch(0.907 0.151 194.8)
Conversions de couleur
- HEX
- #22ffff
- RGB
- rgb(34 255 255)
- HSL
- hsl(180 100% 57%)
- HWB
- hwb(180 13% 0%)
- OKLCH
- oklch(0.907 0.151 194.8)
- OKLab
- oklab(0.907 -0.146 -0.039)
- CIE Lab
- lab(90.83 -49.56 -14.7)
- LCH
- lch(90.83 51.7 196.5)
- CMYK
- cmyk(87% 0% 0% 0%)
Teintes · Ombres · Tons
Teintes
- 56FFFF
- 75FFFF
- 8CFFFF
- A1FFFF
- B3FFFF
- C4FFFF
- D4FFFF
- E3FFFF
- F1FFFF
Ombres
- 1CDEDE
- 16BEBE
- 119E9E
- 0B8080
- 076363
- 034848
- 012E2E
- 001616
- 000303
Tons
- 43F2F2
- 56E5E4
- 62D8D7
- 6BCBCA
- 72BEBE
- 78B2B1
- 7BA5A5
- 7E9998
- 7F8C8C
Harmonies de couleurs
Complémentaire +180°
- 22FFFF
Crisp Cyan
- FFD4D6
≈ We Peep
Analogue -30° +30°
- 22FFFF
Crisp Cyan
- 71FFC8
≈ Iridescent Turquoise
- B6EAFF
≈ Ice Effect
Triadique +120° +240°
- 22FFFF
Crisp Cyan
- F1D4FF
≈ Rose Dragée
- FFDAA8
≈ Peachy Summer Skies
Complémentaire divisée +150° +210°
- 22FFFF
Crisp Cyan
- FFD1EA
≈ Pink Currant
- FFD6C5
≈ Tiny Pink
Tétradique +90° +180° +270°
- 22FFFF
Crisp Cyan
- DCDDFF
≈ Transparent Blue
- FFD4D6
≈ We Peep
- F0E662
≈ Celandine
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.24:1 · APCA Lc 12
Ag
AAASur noir
WCAG 16.81:1 · APCA Lc 92
Meilleure couleur de texte: #000000
WCAG 16.81:1 (AAA) · APCA Lc 92
Contrast pairs
Extraits de code
CSS
:root {
--crisp-cyan: #22ffff;
--crisp-cyan-rgb: 34 255 255;
--crisp-cyan-oklch: oklch(0.907 0.151 194.8);
}
.element {
color: var(--crisp-cyan);
background-color: hsl(180 100% 57%);
border-color: oklch(0.907 0.151 194.8);
}Tailwind CSS v4
@theme {
--color-crisp-cyan: #22ffff;
--color-crisp-cyan-50: #c3ffff;
--color-crisp-cyan-100: #abf8f9;
--color-crisp-cyan-200: #7fe9ea;
--color-crisp-cyan-300: #38cfd2;
--color-crisp-cyan-400: #00b9ba;
--color-crisp-cyan-500: #00a2a5;
--color-crisp-cyan-600: #00898b;
--color-crisp-cyan-700: #006e70;
--color-crisp-cyan-800: #005150;
--color-crisp-cyan-900: #003938;
--color-crisp-cyan-950: #002323;
}SCSS
$crisp-cyan: #22ffff;
$crisp-cyan-rgb: 34, 255, 255;
$crisp-cyan-light: mix(#fff, $crisp-cyan, 20%);
$crisp-cyan-dark: mix(#000, $crisp-cyan, 20%);
.element {
color: $crisp-cyan;
box-shadow: 0 0 0 2px rgba($crisp-cyan, 0.35);
}