色名 · #C8A89E
Teatime Mauve
Teatime Mauveは#C8A89E：rgb(200 168 158)、hsl(14 28% 70%)、oklch(0.757 0.04 38.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Teatime Mauve color name →
#C8A89E
oklch(0.757 0.04 38.1)
カラー変換
- HEX
- #c8a89e
- RGB
- rgb(200 168 158)
- HSL
- hsl(14 28% 70%)
- HWB
- hwb(14 62% 22%)
- OKLCH
- oklch(0.757 0.04 38.1)
- OKLab
- oklab(0.757 0.032 0.025)
- CIE Lab
- lab(71.55 10.91 9.77)
- LCH
- lch(71.55 14.65 41.9)
- CMYK
- cmyk(0% 16% 21% 22%)
ティント · シェード · トーン
ティント
- CEB0A7
- D3B9B1
- D9C2BA
- DECAC4
- E4D3CE
- E9DCD7
- EFE4E1
- F4EDEB
- FAF6F5
シェード
- AE9289
- 947C74
- 7B6760
- 63524D
- 4C3F3A
- 362C29
- 211A18
- 0F0A09
- 020101
トーン
- C1A49B
- B9A098
- B29C95
- AB9892
- A4948F
- 9C908C
- 958C89
- 8E8886
- 878483
カラーハーモニー
補色 +180°
- C8A89E
Teatime Mauve
- 94B7C1
≈ Tahoe Blue
類似色 -30° +30°
- C8A89E
Teatime Mauve
- C8A6AB
≈ Dutchess Dawn
- C2AC95
≈ Antler Velvet
トライアド +120° +240°
- C8A89E
Teatime Mauve
- 9CB8A7
≈ Spearmint Haze
- AAAECA
≈ Lovely Lilac
スプリットコンプリメンタリー +150° +210°
- C8A89E
Teatime Mauve
- 94B9B5
≈ Teal Tree
- 9DB3C9
≈ Aerial View
テトラード +90° +180° +270°
- C8A89E
Teatime Mauve
- A9B59A
≈ Mow the Lawn
- 94B7C1
≈ Tahoe Blue
- B7AAC4
≈ Velour
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.19:1 · APCA Lc 43
Ag
AAA黒の上
WCAG 9.55:1 · APCA Lc 59
最適な文字色: #000000
WCAG 9.55:1 (AAA) · APCA Lc 59
Contrast pairs
コードスニペット
CSS
:root {
--teatime-mauve: #c8a89e;
--teatime-mauve-rgb: 200 168 158;
--teatime-mauve-oklch: oklch(0.757 0.04 38.1);
}
.element {
color: var(--teatime-mauve);
background-color: hsl(14 28% 70%);
border-color: oklch(0.757 0.04 38.1);
}Tailwind CSS v4
@theme {
--color-teatime-mauve: #c8a89e;
--color-teatime-mauve-50: #fff2ed;
--color-teatime-mauve-100: #f5e4de;
--color-teatime-mauve-200: #e4cfc8;
--color-teatime-mauve-300: #cbb1a8;
--color-teatime-mauve-400: #b5978d;
--color-teatime-mauve-500: #9f7d73;
--color-teatime-mauve-600: #866a62;
--color-teatime-mauve-700: #6b554e;
--color-teatime-mauve-800: #4f3e39;
--color-teatime-mauve-900: #372a27;
--color-teatime-mauve-950: #221815;
}SCSS
$teatime-mauve: #c8a89e;
$teatime-mauve-rgb: 200, 168, 158;
$teatime-mauve-light: mix(#fff, $teatime-mauve, 20%);
$teatime-mauve-dark: mix(#000, $teatime-mauve, 20%);
.element {
color: $teatime-mauve;
box-shadow: 0 0 0 2px rgba($teatime-mauve, 0.35);
}