Cor nomeada · #F0FFFF
Vapour
Vapour é #F0FFFF: rgb(240 255 255), hsl(180 100% 97%), oklch(0.989 0.016 196.9). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Vapour color name →
#F0FFFF
oklch(0.989 0.016 196.9)
Conversões de cor
- HEX
- #f0ffff
- RGB
- rgb(240 255 255)
- HSL
- hsl(180 100% 97%)
- HWB
- hwb(180 94% 0%)
- OKLCH
- oklch(0.989 0.016 196.9)
- OKLab
- oklab(0.989 -0.015 -0.005)
- CIE Lab
- lab(98.88 -5.07 -1.78)
- LCH
- lch(98.88 5.38 199.4)
- CMYK
- cmyk(6% 0% 0% 0%)
Tons claros · Sombras · Tons
Tons claros
- F2FFFF
- F3FFFF
- F5FFFF
- F6FFFF
- F8FFFF
- F9FFFF
- FBFFFF
- FCFFFF
- FEFFFF
Sombras
- D1DEDE
- B2BEBE
- 959E9E
- 788080
- 5D6363
- 434848
- 2A2E2E
- 141616
- 030303
Tons
- E4F2F2
- D9E4E4
- CDD7D7
- C2CACA
- B6BEBD
- ABB1B1
- A0A4A4
- 959898
- 8B8C8C
Harmonias de cor
Complementar +180°
- F0FFFF
Vapour
- FFFAFA
≈ Snow
Análoga -30° +30°
- F0FFFF
Vapour
- F2FFF9
≈ Mint Cream
- F7FCFF
≈ Heart of Ice
Tríade +120° +240°
- F0FFFF
Vapour
- FEFAFF
≈ Snowman
- FFFBF5
≈ Eyeball
Complementar dividida +150° +210°
- F0FFFF
Vapour
- FFFAFC
≈ Snowman
- FFFAF8
≈ Eyeball
Tétrade +90° +180° +270°
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.02:1 · APCA Lc 0
Ag
AAASobre preto
WCAG 20.45:1 · APCA Lc 106
Melhor cor de texto: #000000
WCAG 20.45:1 (AAA) · APCA Lc 106
Contrast pairs
Trechos de código
CSS
:root {
--vapour: #f0ffff;
--vapour-rgb: 240 255 255;
--vapour-oklch: oklch(0.989 0.016 196.9);
}
.element {
color: var(--vapour);
background-color: hsl(180 100% 97%);
border-color: oklch(0.989 0.016 196.9);
}Tailwind CSS v4
@theme {
--color-vapour: #f0ffff;
--color-vapour-50: #f0f7f7;
--color-vapour-100: #e2e9ea;
--color-vapour-200: #cdd6d7;
--color-vapour-300: #afbaba;
--color-vapour-400: #94a1a1;
--color-vapour-500: #7b8a8a;
--color-vapour-600: #687474;
--color-vapour-700: #535d5d;
--color-vapour-800: #3c4444;
--color-vapour-900: #292f2f;
--color-vapour-950: #171c1b;
}SCSS
$vapour: #f0ffff;
$vapour-rgb: 240, 255, 255;
$vapour-light: mix(#fff, $vapour, 20%);
$vapour-dark: mix(#000, $vapour, 20%);
.element {
color: $vapour;
box-shadow: 0 0 0 2px rgba($vapour, 0.35);
}