Nazwany kolor · #AEBBC1
Blue Heather
Blue Heather to #AEBBC1: rgb(174 187 193), hsl(199 13% 72%), oklch(0.784 0.017 227). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Blue Heather color name →
#AEBBC1
oklch(0.784 0.017 227)
Konwersje koloru
- HEX
- #aebbc1
- RGB
- rgb(174 187 193)
- HSL
- hsl(199 13% 72%)
- HWB
- hwb(199 68% 24%)
- OKLCH
- oklch(0.784 0.017 227)
- OKLab
- oklab(0.784 -0.011 -0.012)
- CIE Lab
- lab(75 -3.76 -4.67)
- LCH
- lch(75 5.99 231.2)
- CMYK
- cmyk(10% 3% 0% 24%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B6C2C7
- BEC8CD
- C6CFD3
- CED6D9
- D6DDE0
- DEE3E6
- E6EAEC
- EEF1F2
- F7F8F9
Odcienie ciemniejsze
- 97A2A7
- 808A8F
- 6A7377
- 555C5F
- 414649
- 2E3234
- 1C1F20
- 0B0D0E
- 010202
Tony
- A9B5BA
- A5AFB4
- A0A9AD
- 9BA3A6
- 979DA0
- 929799
- 8E9193
- 898B8D
- 858686
Harmonie kolorów
Komplementarna +180°
- AEBBC1
Blue Heather
- C2B6B0
≈ Sand Ripples
Analogowa -30° +30°
- AEBBC1
Blue Heather
- ADBCBC
≈ Watery
- B2B9C4
≈ Granite Fog
Triada +120° +240°
- AEBBC1
Blue Heather
- C1B4BB
≈ Blossom Powder
- B9B9AD
≈ Zen Pebble
Komplementarna rozszczepiona +150° +210°
- AEBBC1
Blue Heather
- C3B5B5
≈ Young Fawn
- BFB7AD
≈ Row House
Tetrada +90° +180° +270°
- AEBBC1
Blue Heather
- BDB5C0
≈ Future Vision
- C2B6B0
≈ Sand Ripples
- B4BBB1
≈ Keystone Grey
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.96:1 · APCA Lc 38
Ag
AAANa czerni
WCAG 10.67:1 · APCA Lc 64
Najlepszy kolor tekstu: #000000
WCAG 10.67:1 (AAA) · APCA Lc 64
Contrast pairs
Fragmenty kodu
CSS
:root {
--blue-heather: #aebbc1;
--blue-heather-rgb: 174 187 193;
--blue-heather-oklch: oklch(0.784 0.017 227);
}
.element {
color: var(--blue-heather);
background-color: hsl(199 13% 72%);
border-color: oklch(0.784 0.017 227);
}Tailwind CSS v4
@theme {
--color-blue-heather: #aebbc1;
--color-blue-heather-50: #f0f6f9;
--color-blue-heather-100: #e2e9ec;
--color-blue-heather-200: #cdd6da;
--color-blue-heather-300: #afb9be;
--color-blue-heather-400: #95a1a6;
--color-blue-heather-500: #7b898f;
--color-blue-heather-600: #687479;
--color-blue-heather-700: #535c61;
--color-blue-heather-800: #3c4447;
--color-blue-heather-900: #2a2f31;
--color-blue-heather-950: #171b1d;
}SCSS
$blue-heather: #aebbc1;
$blue-heather-rgb: 174, 187, 193;
$blue-heather-light: mix(#fff, $blue-heather, 20%);
$blue-heather-dark: mix(#000, $blue-heather, 20%);
.element {
color: $blue-heather;
box-shadow: 0 0 0 2px rgba($blue-heather, 0.35);
}