Couleur nommée la plus proche · #989AA9
#989AA9
Couleur nommée la plus proche: Too Big to Whale
#989AA9 (rgb(152 154 169), hsl(233 9% 63%), oklch(0.689 0.022 279.8)) est la plus proche de la couleur nommée Too Big to Whale. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#989AA9
oklch(0.689 0.022 279.8)
Conversions de couleur
- HEX
- #989aa9
- RGB
- rgb(152 154 169)
- HSL
- hsl(233 9% 63%)
- HWB
- hwb(233 60% 34%)
- OKLCH
- oklch(0.689 0.022 279.8)
- OKLab
- oklab(0.689 0.004 -0.022)
- CIE Lab
- lab(63.8 1.53 -8.12)
- LCH
- lch(63.8 8.26 280.7)
- CMYK
- cmyk(10% 9% 0% 34%)
Teintes · Ombres · Tons
Teintes
- A2A4B1
- ACADBA
- B6B7C2
- C0C1CB
- CACBD3
- D5D6DC
- DFE0E5
- EAEAED
- F4F5F6
Ombres
- 848592
- 70717C
- 5C5E67
- 4A4B53
- 38393F
- 27272C
- 17171B
- 08090A
- 010101
Tons
- 9697A5
- 9395A1
- 91929D
- 8E9098
- 8C8D94
- 898A90
- 87888C
- 858588
- 828384
Harmonies de couleurs
Complémentaire +180°
- 989AA9
Too Big to Whale
- 9E9C8C
≈ Milk Thistle
Analogue -30° +30°
- 989AA9
Too Big to Whale
- 919DA9
≈ Blue Heeler
- 9F98A6
≈ Fortune
Triadique +120° +240°
- 989AA9
Too Big to Whale
- A89791
≈ Putty Pearl
- 90A096
≈ Verdant Retreat
Complémentaire divisée +150° +210°
- 989AA9
Too Big to Whale
- A4998D
≈ Grey Flanks
- 979E90
≈ Sycamore Stand
Tétradique +90° +180° +270°
- 989AA9
Too Big to Whale
- A89698
≈ Sunrise Over Tahiti
- 9E9C8C
≈ Milk Thistle
- 8CA09E
≈ Aqua Smoke
Contraste et accessibilité
Ag
FailSur blanc
WCAG 2.78:1 · APCA Lc 54
Ag
AAASur noir
WCAG 7.53:1 · APCA Lc 48
Meilleure couleur de texte: #000000
WCAG 7.53:1 (AAA) · APCA Lc 48
Contrast pairs
Extraits de code
CSS
:root {
--too-big-to-whale: #989aa9;
--too-big-to-whale-rgb: 152 154 169;
--too-big-to-whale-oklch: oklch(0.689 0.022 279.8);
}
.element {
color: var(--too-big-to-whale);
background-color: hsl(233 9% 63%);
border-color: oklch(0.689 0.022 279.8);
}Tailwind CSS v4
@theme {
--color-too-big-to-whale: #989aa9;
--color-too-big-to-whale-50: #f4f4fb;
--color-too-big-to-whale-100: #e6e7ef;
--color-too-big-to-whale-200: #d2d3de;
--color-too-big-to-whale-300: #b5b6c3;
--color-too-big-to-whale-400: #9b9dac;
--color-too-big-to-whale-500: #838595;
--color-too-big-to-whale-600: #6f707e;
--color-too-big-to-whale-700: #595a65;
--color-too-big-to-whale-800: #40424a;
--color-too-big-to-whale-900: #2c2d33;
--color-too-big-to-whale-950: #191a1f;
}SCSS
$too-big-to-whale: #989aa9;
$too-big-to-whale-rgb: 152, 154, 169;
$too-big-to-whale-light: mix(#fff, $too-big-to-whale, 20%);
$too-big-to-whale-dark: mix(#000, $too-big-to-whale, 20%);
.element {
color: $too-big-to-whale;
box-shadow: 0 0 0 2px rgba($too-big-to-whale, 0.35);
}