Najbliższy nazwany kolor · #BD8E9B
#BD8E9B
Najbliższy nazwany kolor: Punched Pink
#BD8E9B (rgb(189 142 155), hsl(343 26% 65%), oklch(0.695 0.059 0.5)) jest najbliższy nazwanemu kolorowi Punched Pink. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#BD8E9B
oklch(0.695 0.059 0.5)
Konwersje koloru
- HEX
- #bd8e9b
- RGB
- rgb(189 142 155)
- HSL
- hsl(343 26% 65%)
- HWB
- hwb(343 56% 26%)
- OKLCH
- oklch(0.695 0.059 0.5)
- OKLab
- oklab(0.695 0.059 0.001)
- CIE Lab
- lab(63.92 19.83 0.41)
- LCH
- lch(63.92 19.83 1.2)
- CMYK
- cmyk(0% 25% 18% 26%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- C499A5
- CBA4AE
- D1AFB8
- D8BAC2
- DFC5CC
- E5D1D6
- ECDCE0
- F2E8EA
- F9F3F5
Odcienie ciemniejsze
- A47B86
- 8C6872
- 74565E
- 5D444B
- 473439
- 332428
- 1F1518
- 0D0709
- 020101
Tony
- B78D98
- B18B96
- AB8A93
- A58990
- 9F878D
- 99868B
- 938488
- 8C8385
- 868283
Harmonie kolorów
Komplementarna +180°
- BD8E9B
Punched Pink
- 73AA9F
≈ Twining Vine
Analogowa -30° +30°
- BD8E9B
Punched Pink
- B390AE
≈ Metal Petal
- BF9087
≈ Revival Rose
Triada +120° +240°
- BD8E9B
Punched Pink
- 98A37A
≈ Cucuzza Verde
- 7CA2BF
≈ Far Horizons
Komplementarna rozszczepiona +150° +210°
- BD8E9B
Punched Pink
- 83A88A
≈ Mermaid’s Cove
- 71A7B2
≈ Water Cooler
Tetrada +90° +180° +270°
- BD8E9B
Punched Pink
- AB9C73
≈ Sunbaked Adobe
- 73AA9F
≈ Twining Vine
- 8F9CC3
≈ Lavender Lustre
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.79:1 · APCA Lc 54
Ag
AAANa czerni
WCAG 7.50:1 · APCA Lc 48
Najlepszy kolor tekstu: #000000
WCAG 7.50:1 (AAA) · APCA Lc 48
Contrast pairs
Fragmenty kodu
CSS
:root {
--punched-pink: #bd8e9b;
--punched-pink-rgb: 189 142 155;
--punched-pink-oklch: oklch(0.695 0.059 0.5);
}
.element {
color: var(--punched-pink);
background-color: hsl(343 26% 65%);
border-color: oklch(0.695 0.059 0.5);
}Tailwind CSS v4
@theme {
--color-punched-pink: #bd8e9b;
--color-punched-pink-50: #ffeff3;
--color-punched-pink-100: #fae0e6;
--color-punched-pink-200: #ebcad2;
--color-punched-pink-300: #d3abb5;
--color-punched-pink-400: #bd909d;
--color-punched-pink-500: #a87684;
--color-punched-pink-600: #8e6470;
--color-punched-pink-700: #725059;
--color-punched-pink-800: #543a42;
--color-punched-pink-900: #3a282e;
--color-punched-pink-950: #24161a;
}SCSS
$punched-pink: #bd8e9b;
$punched-pink-rgb: 189, 142, 155;
$punched-pink-light: mix(#fff, $punched-pink, 20%);
$punched-pink-dark: mix(#000, $punched-pink, 20%);
.element {
color: $punched-pink;
box-shadow: 0 0 0 2px rgba($punched-pink, 0.35);
}