色名 · #884C5E
Hawthorn Rose
Hawthorn Roseは#884C5E：rgb(136 76 94)、hsl(342 28% 42%)、oklch(0.493 0.084 1.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Hawthorn Rose color name →
#884C5E
oklch(0.493 0.084 1.4)
カラー変換
- HEX
- #884c5e
- RGB
- rgb(136 76 94)
- HSL
- hsl(342 28% 42%)
- HWB
- hwb(342 30% 47%)
- OKLCH
- oklch(0.493 0.084 1.4)
- OKLab
- oklab(0.493 0.084 0.002)
- CIE Lab
- lab(40.14 27.63 1.11)
- LCH
- lch(40.14 27.65 2.3)
- CMYK
- cmyk(0% 44% 31% 47%)
ティント · シェード · トーン
ティント
- 945D6D
- A16E7C
- AD7F8B
- B9919B
- C5A2AB
- D0B4BB
- DCC7CC
- E8D9DD
- F3ECEE
シェード
- 754151
- 633644
- 522C37
- 41222B
- 31181F
- 220F14
- 13060A
- 060203
- 010000
トーン
- 885261
- 885765
- 875C68
- 87616B
- 86676F
- 856C72
- 847176
- 837679
- 827B7D
カラーハーモニー
補色 +180°
- 884C5E
Hawthorn Rose
- 137164
≈ Pharaoh’s Gem
類似色 -30° +30°
- 884C5E
Hawthorn Rose
- 7D4F77
≈ Phlox Flower Violet
- 8A4E43
≈ Rudraksha Beads
トライアド +120° +240°
- 884C5E
Hawthorn Rose
- 5A692F
≈ Deathworld Forest
- 30678C
≈ Drake’s Neck
スプリットコンプリメンタリー +150° +210°
- 884C5E
Hawthorn Rose
- 3A6F49
≈ Parsley Sprig
- 086E7C
≈ Carnival Night
テトラード +90° +180° +270°
- 884C5E
Hawthorn Rose
- 735F21
≈ Brassy Brass
- 137164
≈ Pharaoh’s Gem
- 505E91
≈ Fresh Take
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 6.47:1 · APCA Lc 82
Ag
Fail黒の上
WCAG 3.24:1 · APCA Lc 20
最適な文字色: #FFFFFF
WCAG 6.47:1 (AA) · APCA Lc 82
Contrast pairs
コードスニペット
CSS
:root {
--hawthorn-rose: #884c5e;
--hawthorn-rose-rgb: 136 76 94;
--hawthorn-rose-oklch: oklch(0.493 0.084 1.4);
}
.element {
color: var(--hawthorn-rose);
background-color: hsl(342 28% 42%);
border-color: oklch(0.493 0.084 1.4);
}Tailwind CSS v4
@theme {
--color-hawthorn-rose: #884c5e;
--color-hawthorn-rose-50: #ffecf2;
--color-hawthorn-rose-100: #ffdde5;
--color-hawthorn-rose-200: #f5c6d0;
--color-hawthorn-rose-300: #dda6b3;
--color-hawthorn-rose-400: #c98a9b;
--color-hawthorn-rose-500: #b46e82;
--color-hawthorn-rose-600: #985d6e;
--color-hawthorn-rose-700: #7a4b58;
--color-hawthorn-rose-800: #5a3641;
--color-hawthorn-rose-900: #3f252d;
--color-hawthorn-rose-950: #28131a;
}SCSS
$hawthorn-rose: #884c5e;
$hawthorn-rose-rgb: 136, 76, 94;
$hawthorn-rose-light: mix(#fff, $hawthorn-rose, 20%);
$hawthorn-rose-dark: mix(#000, $hawthorn-rose, 20%);
.element {
color: $hawthorn-rose;
box-shadow: 0 0 0 2px rgba($hawthorn-rose, 0.35);
}