Nazwany kolor · #B3C4BA
Aquamarine Dream
Aquamarine Dream to #B3C4BA: rgb(179 196 186), hsl(145 13% 74%), oklch(0.804 0.023 160.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Aquamarine Dream color name →
#B3C4BA
oklch(0.804 0.023 160.1)
Konwersje koloru
- HEX
- #b3c4ba
- RGB
- rgb(179 196 186)
- HSL
- hsl(145 13% 74%)
- HWB
- hwb(145 70% 23%)
- OKLCH
- oklch(0.804 0.023 160.1)
- OKLab
- oklab(0.804 -0.022 0.008)
- CIE Lab
- lab(77.63 -7.46 2.95)
- LCH
- lch(77.63 8.02 158.4)
- CMYK
- cmyk(9% 0% 5% 23%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- BACAC1
- C2D0C7
- C9D5CE
- D1DBD5
- D9E1DC
- E0E7E3
- E8EDEA
- EFF3F1
- F7F9F8
Odcienie ciemniejsze
- 9BAAA1
- 849189
- 6E7872
- 58615C
- 434A46
- 2F3532
- 1D211E
- 0C0E0D
- 010202
Tony
- AEBDB4
- A9B6AE
- A3AFA8
- 9EA8A2
- 99A19D
- 949B97
- 8F9491
- 8A8D8B
- 858786
Harmonie kolorów
Komplementarna +180°
- B3C4BA
Aquamarine Dream
- CABAC4
≈ Queen’s Violet
Analogowa -30° +30°
- B3C4BA
Aquamarine Dream
- BAC2B3
≈ Belize Green
- AFC4C2
≈ Jungle Mist
Triada +120° +240°
- B3C4BA
Aquamarine Dream
- BCBECE
≈ Mount Nirvana
- CDBBB4
≈ Mothy
Komplementarna rozszczepiona +150° +210°
- B3C4BA
Aquamarine Dream
- C4BBCB
≈ Gentleman’s Suit
- CEB9BC
≈ Pink Polar
Tetrada +90° +180° +270°
- B3C4BA
Aquamarine Dream
- B4C1CE
≈ Hazy
- CABAC4
≈ Queen’s Violet
- C9BDAF
≈ Creamy Mushroom
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.82:1 · APCA Lc 34
Ag
AAANa czerni
WCAG 11.52:1 · APCA Lc 69
Najlepszy kolor tekstu: #000000
WCAG 11.52:1 (AAA) · APCA Lc 69
Contrast pairs
Fragmenty kodu
CSS
:root {
--aquamarine-dream: #b3c4ba;
--aquamarine-dream-rgb: 179 196 186;
--aquamarine-dream-oklch: oklch(0.804 0.023 160.1);
}
.element {
color: var(--aquamarine-dream);
background-color: hsl(145 13% 74%);
border-color: oklch(0.804 0.023 160.1);
}Tailwind CSS v4
@theme {
--color-aquamarine-dream: #b3c4ba;
--color-aquamarine-dream-50: #f0f7f3;
--color-aquamarine-dream-100: #e1eae5;
--color-aquamarine-dream-200: #ccd7d1;
--color-aquamarine-dream-300: #adbbb4;
--color-aquamarine-dream-400: #93a39a;
--color-aquamarine-dream-500: #798b81;
--color-aquamarine-dream-600: #67766d;
--color-aquamarine-dream-700: #525e57;
--color-aquamarine-dream-800: #3c453f;
--color-aquamarine-dream-900: #29302c;
--color-aquamarine-dream-950: #171c19;
}SCSS
$aquamarine-dream: #b3c4ba;
$aquamarine-dream-rgb: 179, 196, 186;
$aquamarine-dream-light: mix(#fff, $aquamarine-dream, 20%);
$aquamarine-dream-dark: mix(#000, $aquamarine-dream, 20%);
.element {
color: $aquamarine-dream;
box-shadow: 0 0 0 2px rgba($aquamarine-dream, 0.35);
}