色名 · #CC7753
Brandied Melon
Brandied Melonは#CC7753：rgb(204 119 83)、hsl(18 54% 56%)、oklch(0.655 0.118 43.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Brandied Melon color name →
#CC7753
oklch(0.655 0.118 43.3)
カラー変換
- HEX
- #cc7753
- RGB
- rgb(204 119 83)
- HSL
- hsl(18 54% 56%)
- HWB
- hwb(18 33% 20%)
- OKLCH
- oklch(0.655 0.118 43.3)
- OKLab
- oklab(0.655 0.086 0.081)
- CIE Lab
- lab(59.14 31.65 34.68)
- LCH
- lch(59.14 46.95 47.6)
- CMYK
- cmyk(0% 42% 59% 20%)
ティント · シェード · トーン
ティント
- D28564
- D89275
- DEA086
- E3AD97
- E9BBA8
- EEC8B9
- F2D6CB
- F7E4DC
- FBF1ED
シェード
- B16747
- 97573B
- 7E4730
- 653825
- 4E2A1B
- 371C11
- 221008
- 0F0502
- 020100
トーン
- C57959
- BE7A5E
- B67B63
- AF7C67
- A87D6C
- A07E70
- 987F74
- 907F78
- 88807C
カラーハーモニー
補色 +180°
- CC7753
Brandied Melon
- 189FC5
≈ Major Blue
類似色 -30° +30°
- CC7753
Brandied Melon
- CE707C
≈ Lotus Red
- BC8432
≈ Mango Brown
トライアド +120° +240°
- CC7753
Brandied Melon
- 3BA77C
≈ Cosmic Green
- 8786D6
≈ Indigo Bloom
スプリットコンプリメンタリー +150° +210°
- CC7753
Brandied Melon
- 00A6A4
≈ Royal Cloak
- 5A94D7
≈ Little Boy Blue
テトラード +90° +180° +270°
- CC7753
Brandied Melon
- 73A052
≈ Unakite
- 189FC5
≈ Major Blue
- AA7AC4
≈ Wisteria
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.31:1 · APCA Lc 60
Ag
AA黒の上
WCAG 6.33:1 · APCA Lc 41
最適な文字色: #000000
WCAG 6.33:1 (AA) · APCA Lc 41
Contrast pairs
コードスニペット
CSS
:root {
--brandied-melon: #cc7753;
--brandied-melon-rgb: 204 119 83;
--brandied-melon-oklch: oklch(0.655 0.118 43.3);
}
.element {
color: var(--brandied-melon);
background-color: hsl(18 54% 56%);
border-color: oklch(0.655 0.118 43.3);
}Tailwind CSS v4
@theme {
--color-brandied-melon: #cc7753;
--color-brandied-melon-50: #ffebda;
--color-brandied-melon-100: #ffdcc8;
--color-brandied-melon-200: #ffc5ab;
--color-brandied-melon-300: #eba485;
--color-brandied-melon-400: #d98664;
--color-brandied-melon-500: #c56941;
--color-brandied-melon-600: #a75938;
--color-brandied-melon-700: #86472c;
--color-brandied-melon-800: #643320;
--color-brandied-melon-900: #462315;
--color-brandied-melon-950: #2d1107;
}SCSS
$brandied-melon: #cc7753;
$brandied-melon-rgb: 204, 119, 83;
$brandied-melon-light: mix(#fff, $brandied-melon, 20%);
$brandied-melon-dark: mix(#000, $brandied-melon, 20%);
.element {
color: $brandied-melon;
box-shadow: 0 0 0 2px rgba($brandied-melon, 0.35);
}