Colore con nome · #A7BAD3
Babbling Creek
Babbling Creek è #A7BAD3: rgb(167 186 211), hsl(214 33% 74%), oklch(0.783 0.041 255.3). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Blue mean? → · Babbling Creek color name →
#A7BAD3
oklch(0.783 0.041 255.3)
Conversioni di colore
- HEX
- #a7bad3
- RGB
- rgb(167 186 211)
- HSL
- hsl(214 33% 74%)
- HWB
- hwb(214 65% 17%)
- OKLCH
- oklch(0.783 0.041 255.3)
- OKLab
- oklab(0.783 -0.01 -0.04)
- CIE Lab
- lab(74.67 -2.73 -14.96)
- LCH
- lch(74.67 15.2 259.6)
- CMYK
- cmyk(21% 12% 0% 17%)
Tinte · Ombre · Toni
Tinte
- B0C1D7
- B8C8DC
- C1CEE0
- CAD5E5
- D2DCE9
- DBE3ED
- E4EAF2
- EDF1F6
- F6F8FB
Ombre
- 91A1B7
- 7B899C
- 667282
- 525C69
- 3E4651
- 2C323A
- 1A1E24
- 0A0D10
- 010202
Toni
- A3B4CA
- 9FAEC2
- 9BA8B9
- 97A2B1
- 939DA9
- 9097A0
- 8C9198
- 888B90
- 848688
Armonie di colore
Complementare +180°
- A7BAD3
Babbling Creek
- C8B59B
≈ Sourdough
Analogo -30° +30°
- A7BAD3
Babbling Creek
- 9DBECD
≈ Gift of the Sea
- B5B5D2
≈ Hundred Waters
Triadico +120° +240°
- A7BAD3
Babbling Creek
- D2AEAF
≈ Ballet Rose
- ADBFA4
≈ Meadow Morn
Complementare divisa +150° +210°
- A7BAD3
Babbling Creek
- D0B1A3
≈ Rose Dust
- BCBA9C
≈ Dried Thyme
Tetradico +90° +180° +270°
- A7BAD3
Babbling Creek
- CDAEBE
≈ Pink Potion
- C8B59B
≈ Sourdough
- A0C1B2
≈ Green Silk
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 1.97:1 · APCA Lc 38
Ag
AAASu nero
WCAG 10.60:1 · APCA Lc 64
Miglior colore del testo: #000000
WCAG 10.60:1 (AAA) · APCA Lc 64
Contrast pairs
Frammenti di codice
CSS
:root {
--babbling-creek: #a7bad3;
--babbling-creek-rgb: 167 186 211;
--babbling-creek-oklch: oklch(0.783 0.041 255.3);
}
.element {
color: var(--babbling-creek);
background-color: hsl(214 33% 74%);
border-color: oklch(0.783 0.041 255.3);
}Tailwind CSS v4
@theme {
--color-babbling-creek: #a7bad3;
--color-babbling-creek-50: #eef6ff;
--color-babbling-creek-100: #dfe9f6;
--color-babbling-creek-200: #c9d5e6;
--color-babbling-creek-300: #aab9cd;
--color-babbling-creek-400: #8ea0b7;
--color-babbling-creek-500: #7488a2;
--color-babbling-creek-600: #627389;
--color-babbling-creek-700: #4f5c6e;
--color-babbling-creek-800: #384351;
--color-babbling-creek-900: #272f38;
--color-babbling-creek-950: #151b23;
}SCSS
$babbling-creek: #a7bad3;
$babbling-creek-rgb: 167, 186, 211;
$babbling-creek-light: mix(#fff, $babbling-creek, 20%);
$babbling-creek-dark: mix(#000, $babbling-creek, 20%);
.element {
color: $babbling-creek;
box-shadow: 0 0 0 2px rgba($babbling-creek, 0.35);
}