Nazwany kolor · #9BADBE
Soaring Eagle
Soaring Eagle to #9BADBE: rgb(155 173 190), hsl(209 21% 68%), oklch(0.739 0.032 246.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Soaring Eagle color name →
#9BADBE
oklch(0.739 0.032 246.7)
Konwersje koloru
- HEX
- #9badbe
- RGB
- rgb(155 173 190)
- HSL
- hsl(209 21% 68%)
- HWB
- hwb(209 61% 25%)
- OKLCH
- oklch(0.739 0.032 246.7)
- OKLab
- oklab(0.739 -0.013 -0.029)
- CIE Lab
- lab(69.73 -3.76 -10.96)
- LCH
- lch(69.73 11.59 251.1)
- CMYK
- cmyk(18% 9% 0% 25%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- A5B5C4
- AEBDCB
- B8C5D1
- C2CDD8
- CCD5DE
- D6DEE5
- E0E6EB
- EAEEF2
- F5F7F8
Odcienie ciemniejsze
- 8696A5
- 727F8C
- 5E6A75
- 4B555E
- 394148
- 282D33
- 181B1F
- 090B0D
- 010102
Tony
- 98A8B8
- 96A4B1
- 939FAB
- 909BA5
- 8E969F
- 8B9298
- 888D92
- 85898C
- 838486
Harmonie kolorów
Komplementarna +180°
- 9BADBE
Soaring Eagle
- B9A796
≈ Smoky Beige
Analogowa -30° +30°
- 9BADBE
Soaring Eagle
- 95B0B8
≈ Mountain Stream
- A5A9BF
≈ Lilac Time
Triada +120° +240°
- 9BADBE
Soaring Eagle
- BDA3A7
≈ Tourmaline Mauve
- A5AF99
≈ Ending Spring
Komplementarna rozszczepiona +150° +210°
- 9BADBE
Soaring Eagle
- BEA49D
≈ Mohair Mauve
- B0AB95
≈ Oyster Linen
Tetrada +90° +180° +270°
- 9BADBE
Soaring Eagle
- B8A3B2
≈ Buckwheat Mauve
- B9A796
≈ Smoky Beige
- 9BB1A3
≈ Phoenix Tears
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.30:1 · APCA Lc 45
Ag
AAANa czerni
WCAG 9.11:1 · APCA Lc 57
Najlepszy kolor tekstu: #000000
WCAG 9.11:1 (AAA) · APCA Lc 57
Contrast pairs
Fragmenty kodu
CSS
:root {
--soaring-eagle: #9badbe;
--soaring-eagle-rgb: 155 173 190;
--soaring-eagle-oklch: oklch(0.739 0.032 246.7);
}
.element {
color: var(--soaring-eagle);
background-color: hsl(209 21% 68%);
border-color: oklch(0.739 0.032 246.7);
}Tailwind CSS v4
@theme {
--color-soaring-eagle: #9badbe;
--color-soaring-eagle-50: #eef6fe;
--color-soaring-eagle-100: #e0e9f2;
--color-soaring-eagle-200: #cad6e2;
--color-soaring-eagle-300: #abb9c7;
--color-soaring-eagle-400: #90a1b1;
--color-soaring-eagle-500: #76899b;
--color-soaring-eagle-600: #647483;
--color-soaring-eagle-700: #505c69;
--color-soaring-eagle-800: #39444d;
--color-soaring-eagle-900: #272f35;
--color-soaring-eagle-950: #151b21;
}SCSS
$soaring-eagle: #9badbe;
$soaring-eagle-rgb: 155, 173, 190;
$soaring-eagle-light: mix(#fff, $soaring-eagle, 20%);
$soaring-eagle-dark: mix(#000, $soaring-eagle, 20%);
.element {
color: $soaring-eagle;
box-shadow: 0 0 0 2px rgba($soaring-eagle, 0.35);
}