色名 · #AFA7AC
Beguiling Mauve
Beguiling Mauveは#AFA7AC：rgb(175 167 172)、hsl(322 5% 67%)、oklch(0.737 0.012 339.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Beguiling Mauve color name →
#AFA7AC
oklch(0.737 0.012 339.4)
カラー変換
- HEX
- #afa7ac
- RGB
- rgb(175 167 172)
- HSL
- hsl(322 5% 67%)
- HWB
- hwb(322 65% 31%)
- OKLCH
- oklch(0.737 0.012 339.4)
- OKLab
- oklab(0.737 0.011 -0.004)
- CIE Lab
- lab(69.29 3.66 -1.5)
- LCH
- lch(69.29 3.96 337.7)
- CMYK
- cmyk(0% 5% 2% 31%)
ティント · シェード · トーン
ティント
- B7AFB4
- BFB8BC
- C6C1C4
- CEC9CC
- D6D2D5
- DEDBDD
- E6E4E5
- EFEDEE
- F7F6F6
シェード
- 989195
- 817B7F
- 6B6669
- 565254
- 413E40
- 2E2C2D
- 1C1A1B
- 0B0A0B
- 010101
トーン
- AAA3A7
- A59FA3
- A19B9F
- 9C979A
- 979396
- 928F91
- 8E8C8D
- 898889
- 858484
カラーハーモニー
補色 +180°
- AFA7AC
Beguiling Mauve
- A4ACA7
≈ Ginkgo Green
類似色 -30° +30°
- AFA7AC
Beguiling Mauve
- ACA8AF
≈ Elderberry Grey
- B1A7A8
≈ Smoky Mountain
トライアド +120° +240°
- AFA7AC
Beguiling Mauve
- ABAAA2
≈ Downtown Grey
- A2ACAF
≈ Pale Blue Grey
スプリットコンプリメンタリー +150° +210°
- AFA7AC
Beguiling Mauve
- A7ABA4
≈ Ginkgo Green
- A2ACAB
≈ Portsmouth Bay
テトラード +90° +180° +270°
- AFA7AC
Beguiling Mauve
- AFA9A2
≈ Downtown Grey
- A4ACA7
≈ Ginkgo Green
- A4AAB1
≈ Mischka
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.34:1 · APCA Lc 46
Ag
AAA黒の上
WCAG 8.94:1 · APCA Lc 56
最適な文字色: #000000
WCAG 8.94:1 (AAA) · APCA Lc 56
Contrast pairs
コードスニペット
CSS
:root {
--beguiling-mauve: #afa7ac;
--beguiling-mauve-rgb: 175 167 172;
--beguiling-mauve-oklch: oklch(0.737 0.012 339.4);
}
.element {
color: var(--beguiling-mauve);
background-color: hsl(322 5% 67%);
border-color: oklch(0.737 0.012 339.4);
}Tailwind CSS v4
@theme {
--color-beguiling-mauve: #afa7ac;
--color-beguiling-mauve-50: #f8f4f6;
--color-beguiling-mauve-100: #ebe6e9;
--color-beguiling-mauve-200: #d8d2d6;
--color-beguiling-mauve-300: #bcb5b9;
--color-beguiling-mauve-400: #a39ca1;
--color-beguiling-mauve-500: #8c8389;
--color-beguiling-mauve-600: #766f74;
--color-beguiling-mauve-700: #5f595c;
--color-beguiling-mauve-800: #454144;
--color-beguiling-mauve-900: #302d2f;
--color-beguiling-mauve-950: #1c1a1b;
}SCSS
$beguiling-mauve: #afa7ac;
$beguiling-mauve-rgb: 175, 167, 172;
$beguiling-mauve-light: mix(#fff, $beguiling-mauve, 20%);
$beguiling-mauve-dark: mix(#000, $beguiling-mauve, 20%);
.element {
color: $beguiling-mauve;
box-shadow: 0 0 0 2px rgba($beguiling-mauve, 0.35);
}