色名 · #CE8E8B
Rosette
Rosetteは#CE8E8B：rgb(206 142 139)、hsl(3 41% 68%)、oklch(0.709 0.079 22.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Rosette color name →
#CE8E8B
oklch(0.709 0.079 22.2)
カラー変換
- HEX
- #ce8e8b
- RGB
- rgb(206 142 139)
- HSL
- hsl(3 41% 68%)
- HWB
- hwb(3 55% 19%)
- OKLCH
- oklch(0.709 0.079 22.2)
- OKLab
- oklab(0.709 0.073 0.03)
- CIE Lab
- lab(65.51 24.74 11.95)
- LCH
- lch(65.51 27.48 25.8)
- CMYK
- cmyk(0% 31% 33% 19%)
ティント · シェード · トーン
ティント
- D49996
- D9A4A1
- DEAFAD
- E3BBB8
- E8C6C4
- EDD1CF
- F2DCDB
- F6E8E7
- FBF3F3
シェード
- B37B78
- 986866
- 7F5654
- 664443
- 4E3432
- 382423
- 231514
- 0F0707
- 020101
トーン
- C68D8A
- BF8C89
- B78A88
- AF8987
- A88886
- A08685
- 988583
- 908382
- 888281
カラーハーモニー
補色 +180°
- CE8E8B
Rosette
- 61B0B6
≈ Fountain Blue
類似色 -30° +30°
- CE8E8B
Rosette
- C88DA6
≈ Pinch Me
- C99474
≈ Surprise
トライアド +120° +240°
- CE8E8B
Rosette
- 85AE81
≈ Cressida
- 87A2D3
≈ Wisteria Blue
スプリットコンプリメンタリー +150° +210°
- CE8E8B
Rosette
- 6BB29C
≈ Dusty Jade Green
- 6DAACA
≈ Blue Topaz
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.66:1 · APCA Lc 52
Ag
AAA黒の上
WCAG 7.86:1 · APCA Lc 50
最適な文字色: #000000
WCAG 7.86:1 (AAA) · APCA Lc 50
Contrast pairs
コードスニペット
CSS
:root {
--rosette: #ce8e8b;
--rosette-rgb: 206 142 139;
--rosette-oklch: oklch(0.709 0.079 22.2);
}
.element {
color: var(--rosette);
background-color: hsl(3 41% 68%);
border-color: oklch(0.709 0.079 22.2);
}Tailwind CSS v4
@theme {
--color-rosette: #ce8e8b;
--color-rosette-50: #ffedea;
--color-rosette-100: #ffdedb;
--color-rosette-200: #f4c8c4;
--color-rosette-300: #dda8a4;
--color-rosette-400: #c98c89;
--color-rosette-500: #b5716e;
--color-rosette-600: #99605e;
--color-rosette-700: #7a4c4b;
--color-rosette-800: #5b3737;
--color-rosette-900: #3f2625;
--color-rosette-950: #281414;
}SCSS
$rosette: #ce8e8b;
$rosette-rgb: 206, 142, 139;
$rosette-light: mix(#fff, $rosette, 20%);
$rosette-dark: mix(#000, $rosette, 20%);
.element {
color: $rosette;
box-shadow: 0 0 0 2px rgba($rosette, 0.35);
}