Couleur nommée la plus proche · #A9BBFF
#A9BBFF
Couleur nommée la plus proche: Pastel Blue
#A9BBFF (rgb(169 187 255), hsl(227 100% 83%), oklch(0.803 0.099 272.6)) est la plus proche de la couleur nommée Pastel Blue. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#A9BBFF
oklch(0.803 0.099 272.6)
Conversions de couleur
- HEX
- #a9bbff
- RGB
- rgb(169 187 255)
- HSL
- hsl(227 100% 83%)
- HWB
- hwb(227 66% 0%)
- OKLCH
- oklch(0.803 0.099 272.6)
- OKLab
- oklab(0.803 0.004 -0.099)
- CIE Lab
- lab(76.38 5.48 -35.98)
- LCH
- lch(76.38 36.4 278.7)
- CMYK
- cmyk(34% 27% 0% 0%)
Teintes · Ombres · Tons
Teintes
- B1C2FF
- BAC9FF
- C2D0FF
- CAD6FF
- D3DDFF
- DCE4FF
- E4EBFF
- EDF2FF
- F6F8FF
Ombres
- 92A2DE
- 7C8ABE
- 67739E
- 535C80
- 3F4663
- 2C3248
- 1B1F2E
- 0A0D16
- 010203
Tons
- A5B5F2
- A1AFE5
- 9CA9D8
- 98A3CB
- 949EBE
- 9098B2
- 8C92A5
- 888C99
- 84868C
Harmonies de couleurs
Complémentaire +180°
- A9BBFF
Pastel Blue
- D5BD72
≈ Morning’s Egg
Analogue -30° +30°
- A9BBFF
Pastel Blue
- 85C7F9
≈ Chromis Damsel Blue
- CBB0F4
≈ Teasel Dipsacus
Triadique +120° +240°
- A9BBFF
Pastel Blue
- F8A796
≈ Au Contraire
- 8DD2A0
≈ Fennel
Complémentaire divisée +150° +210°
- A9BBFF
Pastel Blue
- EDB17B
≈ Exciting Orange
- B3C981
≈ Nurgling Green
Tétradique +90° +180° +270°
- A9BBFF
Pastel Blue
- F5A4B9
≈ Petal Power
- D5BD72
≈ Morning’s Egg
- 6ED4C4
≈ Turquoise Twist
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.86:1 · APCA Lc 35
Ag
AAASur noir
WCAG 11.23:1 · APCA Lc 67
Meilleure couleur de texte: #000000
WCAG 11.23:1 (AAA) · APCA Lc 67
Contrast pairs
Extraits de code
CSS
:root {
--pastel-blue: #a9bbff;
--pastel-blue-rgb: 169 187 255;
--pastel-blue-oklch: oklch(0.803 0.099 272.6);
}
.element {
color: var(--pastel-blue);
background-color: hsl(227 100% 83%);
border-color: oklch(0.803 0.099 272.6);
}Tailwind CSS v4
@theme {
--color-pastel-blue: #a9bbff;
--color-pastel-blue-50: #ecf4ff;
--color-pastel-blue-100: #dde6ff;
--color-pastel-blue-200: #c7d2ff;
--color-pastel-blue-300: #a8b4ea;
--color-pastel-blue-400: #8a9bd9;
--color-pastel-blue-500: #7081c8;
--color-pastel-blue-600: #5f6da8;
--color-pastel-blue-700: #4c5787;
--color-pastel-blue-800: #354065;
--color-pastel-blue-900: #242c47;
--color-pastel-blue-950: #13192e;
}SCSS
$pastel-blue: #a9bbff;
$pastel-blue-rgb: 169, 187, 255;
$pastel-blue-light: mix(#fff, $pastel-blue, 20%);
$pastel-blue-dark: mix(#000, $pastel-blue, 20%);
.element {
color: $pastel-blue;
box-shadow: 0 0 0 2px rgba($pastel-blue, 0.35);
}