色名 · #C6B2BE
Masked Mauve
Masked Mauveは#C6B2BE：rgb(198 178 190)、hsl(324 15% 74%)、oklch(0.784 0.028 341)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Masked Mauve color name →
#C6B2BE
oklch(0.784 0.028 341)
カラー変換
- HEX
- #c6b2be
- RGB
- rgb(198 178 190)
- HSL
- hsl(324 15% 74%)
- HWB
- hwb(324 70% 22%)
- OKLCH
- oklch(0.784 0.028 341)
- OKLab
- oklab(0.784 0.027 -0.009)
- CIE Lab
- lab(74.57 8.97 -3.38)
- LCH
- lch(74.57 9.58 339.4)
- CMYK
- cmyk(0% 10% 4% 22%)
ティント · シェード · トーン
ティント
- CCB9C4
- D1C1CB
- D7C9D1
- DDD0D8
- E2D8DE
- E8E0E5
- EEE7EB
- F3EFF2
- F9F7F8
シェード
- AC9AA5
- 92838C
- 7A6D75
- 62575E
- 4B4348
- 352F33
- 211D1F
- 0E0C0D
- 020102
トーン
- BFADB8
- B8A8B1
- B1A3AB
- A99EA5
- A2999E
- 9B9498
- 958F92
- 8E8A8C
- 878586
カラーハーモニー
補色 +180°
- C6B2BE
Masked Mauve
- AABFB3
≈ Foggy Rain
類似色 -30° +30°
- C6B2BE
Masked Mauve
- BEB4C6
≈ Perplexed
- CAB2B4
≈ Izmir Pink
トライアド +120° +240°
- C6B2BE
Masked Mauve
- BCBAA5
≈ Restful
- A6BDC5
≈ Juliet Blue
スプリットコンプリメンタリー +150° +210°
- C6B2BE
Masked Mauve
- B2BDAA
≈ Unroasted Coffee
- A5BFBD
≈ Falkland
テトラード +90° +180° +270°
- C6B2BE
Masked Mauve
- C4B6A6
≈ Pavilion Beige
- AABFB3
≈ Foggy Rain
- ACBACB
≈ Wood Pigeon
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.99:1 · APCA Lc 39
Ag
AAA黒の上
WCAG 10.51:1 · APCA Lc 64
最適な文字色: #000000
WCAG 10.51:1 (AAA) · APCA Lc 64
Contrast pairs
コードスニペット
CSS
:root {
--masked-mauve: #c6b2be;
--masked-mauve-rgb: 198 178 190;
--masked-mauve-oklch: oklch(0.784 0.028 341);
}
.element {
color: var(--masked-mauve);
background-color: hsl(324 15% 74%);
border-color: oklch(0.784 0.028 341);
}Tailwind CSS v4
@theme {
--color-masked-mauve: #c6b2be;
--color-masked-mauve-50: #fbf2f7;
--color-masked-mauve-100: #efe4ea;
--color-masked-mauve-200: #ddd0d7;
--color-masked-mauve-300: #c2b2bb;
--color-masked-mauve-400: #ab98a3;
--color-masked-mauve-500: #947f8c;
--color-masked-mauve-600: #7d6c76;
--color-masked-mauve-700: #64565f;
--color-masked-mauve-800: #493f46;
--color-masked-mauve-900: #332b30;
--color-masked-mauve-950: #1e181c;
}SCSS
$masked-mauve: #c6b2be;
$masked-mauve-rgb: 198, 178, 190;
$masked-mauve-light: mix(#fff, $masked-mauve, 20%);
$masked-mauve-dark: mix(#000, $masked-mauve, 20%);
.element {
color: $masked-mauve;
box-shadow: 0 0 0 2px rgba($masked-mauve, 0.35);
}