Nazwany kolor · #9BD7E9
Jodhpur Blue
Jodhpur Blue to #9BD7E9: rgb(155 215 233), hsl(194 64% 76%), oklch(0.844 0.066 218.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Cyan mean? → · Jodhpur Blue color name →
#9BD7E9
oklch(0.844 0.066 218.4)
Konwersje koloru
- HEX
- #9bd7e9
- RGB
- rgb(155 215 233)
- HSL
- hsl(194 64% 76%)
- HWB
- hwb(194 61% 9%)
- OKLCH
- oklch(0.844 0.066 218.4)
- OKLab
- oklab(0.844 -0.052 -0.041)
- CIE Lab
- lab(82.35 -16.63 -15.37)
- LCH
- lch(82.35 22.64 222.8)
- CMYK
- cmyk(33% 8% 0% 9%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- A6DBEB
- B0DFEE
- BAE3F0
- C4E7F2
- CEEBF4
- D8EFF6
- E2F3F9
- ECF7FB
- F5FBFD
Odcienie ciemniejsze
- 86BBCB
- 729FAD
- 5E8590
- 4B6B74
- 39525A
- 283B41
- 182529
- 091113
- 010203
Tony
- 99CEDE
- 97C5D3
- 94BCC8
- 92B3BE
- 8FABB3
- 8CA2A9
- 89999E
- 869194
- 83888A
Harmonie kolorów
Komplementarna +180°
- 9BD7E9
Jodhpur Blue
- F3BEAD
≈ Madder Orange
Analogowa -30° +30°
- 9BD7E9
Jodhpur Blue
- 9ADAD4
≈ In the Shallows
- ABD0F6
≈ Alphabet Blue
Triada +120° +240°
- 9BD7E9
Jodhpur Blue
- EABCDB
≈ Rosecco
- D7CD9C
≈ Tahuna Sands
Komplementarna rozszczepiona +150° +210°
- 9BD7E9
Jodhpur Blue
- F3BBC3
≈ Petals Unfolding
- E9C59E
≈ Pine Grain
Tetrada +90° +180° +270°
- 9BD7E9
Jodhpur Blue
- D8C1EE
≈ Beefy Pink
- F3BEAD
≈ Madder Orange
- BFD5A7
≈ Winter Willow Green
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.58:1 · APCA Lc 26
Ag
AAANa czerni
WCAG 13.29:1 · APCA Lc 77
Najlepszy kolor tekstu: #000000
WCAG 13.29:1 (AAA) · APCA Lc 77
Contrast pairs
Fragmenty kodu
CSS
:root {
--jodhpur-blue: #9bd7e9;
--jodhpur-blue-rgb: 155 215 233;
--jodhpur-blue-oklch: oklch(0.844 0.066 218.4);
}
.element {
color: var(--jodhpur-blue);
background-color: hsl(194 64% 76%);
border-color: oklch(0.844 0.066 218.4);
}Tailwind CSS v4
@theme {
--color-jodhpur-blue: #9bd7e9;
--color-jodhpur-blue-50: #e2faff;
--color-jodhpur-blue-100: #d1eef7;
--color-jodhpur-blue-200: #b6dbe8;
--color-jodhpur-blue-300: #92c0cf;
--color-jodhpur-blue-400: #71a8b9;
--color-jodhpur-blue-500: #4f91a4;
--color-jodhpur-blue-600: #447b8a;
--color-jodhpur-blue-700: #36626f;
--color-jodhpur-blue-800: #264851;
--color-jodhpur-blue-900: #193238;
--color-jodhpur-blue-950: #091e23;
}SCSS
$jodhpur-blue: #9bd7e9;
$jodhpur-blue-rgb: 155, 215, 233;
$jodhpur-blue-light: mix(#fff, $jodhpur-blue, 20%);
$jodhpur-blue-dark: mix(#000, $jodhpur-blue, 20%);
.element {
color: $jodhpur-blue;
box-shadow: 0 0 0 2px rgba($jodhpur-blue, 0.35);
}