色名 · #D8AAB7
Pink Nectar
Pink Nectarは#D8AAB7：rgb(216 170 183)、hsl(343 37% 76%)、oklch(0.783 0.056 359.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Pink Nectar color name →
#D8AAB7
oklch(0.783 0.056 359.7)
カラー変換
- HEX
- #d8aab7
- RGB
- rgb(216 170 183)
- HSL
- hsl(343 37% 76%)
- HWB
- hwb(343 67% 15%)
- OKLCH
- oklch(0.783 0.056 359.7)
- OKLab
- oklab(0.783 0.056 0)
- CIE Lab
- lab(74.17 18.84 0.11)
- LCH
- lch(74.17 18.84 0.3)
- CMYK
- cmyk(0% 21% 15% 15%)
ティント · シェード · トーン
ティント
- DCB2BE
- E0BBC5
- E4C3CC
- E8CCD3
- ECD4DA
- F0DDE2
- F4E5E9
- F8EEF0
- FBF6F8
シェード
- BC939F
- A07D87
- 856870
- 6B535A
- 533F45
- 3B2D31
- 251B1E
- 110B0C
- 020102
トーン
- CFA6B1
- C6A2AC
- BD9DA6
- B499A1
- AC959B
- A39196
- 9A8D90
- 91888B
- 898485
カラーハーモニー
補色 +180°
- D8AAB7
Pink Nectar
- 91C5BA
≈ Float Your Boat
類似色 -30° +30°
- D8AAB7
Pink Nectar
- CEACCA
≈ Orchid Bouquet
- DAACA4
≈ Everything’s Rosy
トライアド +120° +240°
- D8AAB7
Pink Nectar
- B4BE96
≈ Pale Spring Morning
- 98BED9
≈ Bluette
スプリットコンプリメンタリー +150° +210°
- D8AAB7
Pink Nectar
- A0C3A6
≈ Aroma Garden
- 8EC3CC
≈ Cosmic Blue
テトラード +90° +180° +270°
- D8AAB7
Pink Nectar
- C7B790
≈ Withered Moss
- 91C5BA
≈ Float Your Boat
- AAB7DE
≈ Sassy Violet
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.02:1 · APCA Lc 39
Ag
AAA黒の上
WCAG 10.35:1 · APCA Lc 63
最適な文字色: #000000
WCAG 10.35:1 (AAA) · APCA Lc 63
Contrast pairs
コードスニペット
CSS
:root {
--pink-nectar: #d8aab7;
--pink-nectar-rgb: 216 170 183;
--pink-nectar-oklch: oklch(0.783 0.056 359.7);
}
.element {
color: var(--pink-nectar);
background-color: hsl(343 37% 76%);
border-color: oklch(0.783 0.056 359.7);
}Tailwind CSS v4
@theme {
--color-pink-nectar: #d8aab7;
--color-pink-nectar-50: #ffeff4;
--color-pink-nectar-100: #f9e1e6;
--color-pink-nectar-200: #eacbd2;
--color-pink-nectar-300: #d1acb5;
--color-pink-nectar-400: #bb919d;
--color-pink-nectar-500: #a67785;
--color-pink-nectar-600: #8c6570;
--color-pink-nectar-700: #70505a;
--color-pink-nectar-800: #533a42;
--color-pink-nectar-900: #3a282e;
--color-pink-nectar-950: #24161b;
}SCSS
$pink-nectar: #d8aab7;
$pink-nectar-rgb: 216, 170, 183;
$pink-nectar-light: mix(#fff, $pink-nectar, 20%);
$pink-nectar-dark: mix(#000, $pink-nectar, 20%);
.element {
color: $pink-nectar;
box-shadow: 0 0 0 2px rgba($pink-nectar, 0.35);
}