Nazwany kolor · #8AB3BF
Thistleblossom Soft Blue
Thistleblossom Soft Blue to #8AB3BF: rgb(138 179 191), hsl(194 29% 65%), oklch(0.741 0.047 217.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Cyan mean? → · Thistleblossom Soft Blue color name →
#8AB3BF
oklch(0.741 0.047 217.6)
Konwersje koloru
- HEX
- #8ab3bf
- RGB
- rgb(138 179 191)
- HSL
- hsl(194 29% 65%)
- HWB
- hwb(194 54% 25%)
- OKLCH
- oklch(0.741 0.047 217.6)
- OKLab
- oklab(0.741 -0.037 -0.029)
- CIE Lab
- lab(70.27 -12.15 -10.87)
- LCH
- lch(70.27 16.3 221.8)
- CMYK
- cmyk(28% 6% 0% 25%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 96BAC5
- A1C2CC
- ADC9D2
- B8D1D8
- C4D9DF
- D0E0E5
- DBE8EC
- E7F0F2
- F3F7F9
Odcienie ciemniejsze
- 779BA6
- 65848D
- 536E75
- 42585E
- 324348
- 222F33
- 141D1F
- 070C0D
- 010102
Tony
- 89AEB9
- 89A9B2
- 88A3AC
- 879EA5
- 86999F
- 859499
- 848F93
- 838A8C
- 818586
Harmonie kolorów
Komplementarna +180°
- 8AB3BF
Thistleblossom Soft Blue
- C7A196
≈ Raspberry Kahlua
Analogowa -30° +30°
- 8AB3BF
Thistleblossom Soft Blue
- 8AB5B0
≈ Vintage Blue
- 94AEC8
≈ Nordland Light Blue
Triada +120° +240°
- 8AB3BF
Thistleblossom Soft Blue
- C0A0B6
≈ Lily
- B3AC8A
≈ Underhive Ash
Komplementarna rozszczepiona +150° +210°
- 8AB3BF
Thistleblossom Soft Blue
- C79FA6
≈ Primula
- C0A68C
≈ Pergament
Tetrada +90° +180° +270°
- 8AB3BF
Thistleblossom Soft Blue
- B3A4C3
≈ Blue Pink
- C7A196
≈ Raspberry Kahlua
- A3B192
≈ Family Tree
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.26:1 · APCA Lc 45
Ag
AAANa czerni
WCAG 9.28:1 · APCA Lc 58
Najlepszy kolor tekstu: #000000
WCAG 9.28:1 (AAA) · APCA Lc 58
Contrast pairs
Fragmenty kodu
CSS
:root {
--thistleblossom-soft-blue: #8ab3bf;
--thistleblossom-soft-blue-rgb: 138 179 191;
--thistleblossom-soft-blue-oklch: oklch(0.741 0.047 217.6);
}
.element {
color: var(--thistleblossom-soft-blue);
background-color: hsl(194 29% 65%);
border-color: oklch(0.741 0.047 217.6);
}Tailwind CSS v4
@theme {
--color-thistleblossom-soft-blue: #8ab3bf;
--color-thistleblossom-soft-blue-50: #e7f9ff;
--color-thistleblossom-soft-blue-100: #d7ecf3;
--color-thistleblossom-soft-blue-200: #bfd9e2;
--color-thistleblossom-soft-blue-300: #9ebec8;
--color-thistleblossom-soft-blue-400: #7fa6b1;
--color-thistleblossom-soft-blue-500: #628e9b;
--color-thistleblossom-soft-blue-600: #537883;
--color-thistleblossom-soft-blue-700: #426069;
--color-thistleblossom-soft-blue-800: #2f474d;
--color-thistleblossom-soft-blue-900: #203135;
--color-thistleblossom-soft-blue-950: #0f1d20;
}SCSS
$thistleblossom-soft-blue: #8ab3bf;
$thistleblossom-soft-blue-rgb: 138, 179, 191;
$thistleblossom-soft-blue-light: mix(#fff, $thistleblossom-soft-blue, 20%);
$thistleblossom-soft-blue-dark: mix(#000, $thistleblossom-soft-blue, 20%);
.element {
color: $thistleblossom-soft-blue;
box-shadow: 0 0 0 2px rgba($thistleblossom-soft-blue, 0.35);
}