色名 · #5C3D45
Hibiscus Punch
Hibiscus Punchは#5C3D45：rgb(92 61 69)、hsl(345 20% 30%)、oklch(0.398 0.045 2.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Hibiscus Punch color name →
#5C3D45
oklch(0.398 0.045 2.4)
カラー変換
- HEX
- #5c3d45
- RGB
- rgb(92 61 69)
- HSL
- hsl(345 20% 30%)
- HWB
- hwb(345 24% 64%)
- OKLCH
- oklch(0.398 0.045 2.4)
- OKLab
- oklab(0.398 0.045 0.002)
- CIE Lab
- lab(29.63 14.98 0.9)
- LCH
- lch(29.63 15.01 3.4)
- CMYK
- cmyk(0% 34% 25% 64%)
ティント · シェード · トーン
ティント
- 6B4E56
- 7B6067
- 8B7278
- 9B858A
- AB999D
- BBACB0
- CCC0C3
- DDD5D7
- EEEAEB
シェード
- 4F343B
- 422B31
- 362227
- 2A1A1E
- 1F1215
- 140A0C
- 0A0405
- 030102
- 000000
トーン
- 60434B
- 644A50
- 675156
- 6B575C
- 6F5E62
- 726568
- 766B6E
- 797274
- 7D797A
カラーハーモニー
補色 +180°
- 5C3D45
Hibiscus Punch
- 294F49
≈ Carriage Green
類似色 -30° +30°
- 5C3D45
Hibiscus Punch
- 563E52
≈ Currant Violet
- 5D3E38
≈ Shaved Chocolate
トライアド +120° +240°
- 5C3D45
Hibiscus Punch
- 434B30
≈ Matsuba Green
- 314A5E
≈ Blue Fedora
スプリットコンプリメンタリー +150° +210°
- 5C3D45
Hibiscus Punch
- 344E3B
≈ Angry Gremlin
- 284E55
≈ Hurricane Green Blue
テトラード +90° +180° +270°
- 5C3D45
Hibiscus Punch
- 50472A
≈ Tinny Tin
- 294F49
≈ Carriage Green
- 3F4660
≈ Bella Sera
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 9.50:1 · APCA Lc 92
Ag
Fail黒の上
WCAG 2.20:1 · APCA Lc 10
最適な文字色: #FFFFFF
WCAG 9.50:1 (AAA) · APCA Lc 92
Contrast pairs
コードスニペット
CSS
:root {
--hibiscus-punch: #5c3d45;
--hibiscus-punch-rgb: 92 61 69;
--hibiscus-punch-oklch: oklch(0.398 0.045 2.4);
}
.element {
color: var(--hibiscus-punch);
background-color: hsl(345 20% 30%);
border-color: oklch(0.398 0.045 2.4);
}Tailwind CSS v4
@theme {
--color-hibiscus-punch: #5c3d45;
--color-hibiscus-punch-50: #fff0f3;
--color-hibiscus-punch-100: #f6e2e6;
--color-hibiscus-punch-200: #e6cdd2;
--color-hibiscus-punch-300: #cdaeb4;
--color-hibiscus-punch-400: #b6949c;
--color-hibiscus-punch-500: #a17a83;
--color-hibiscus-punch-600: #88676f;
--color-hibiscus-punch-700: #6d5359;
--color-hibiscus-punch-800: #503c41;
--color-hibiscus-punch-900: #38292d;
--color-hibiscus-punch-950: #22171a;
}SCSS
$hibiscus-punch: #5c3d45;
$hibiscus-punch-rgb: 92, 61, 69;
$hibiscus-punch-light: mix(#fff, $hibiscus-punch, 20%);
$hibiscus-punch-dark: mix(#000, $hibiscus-punch, 20%);
.element {
color: $hibiscus-punch;
box-shadow: 0 0 0 2px rgba($hibiscus-punch, 0.35);
}