色名 · #7E5350
Cranberry Red
Cranberry Redは#7E5350：rgb(126 83 80)、hsl(4 22% 40%)、oklch(0.489 0.058 23.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Cranberry Red color name →
#7E5350
oklch(0.489 0.058 23.8)
カラー変換
- HEX
- #7e5350
- RGB
- rgb(126 83 80)
- HSL
- hsl(4 22% 40%)
- HWB
- hwb(4 31% 51%)
- OKLCH
- oklch(0.489 0.058 23.8)
- OKLab
- oklab(0.489 0.053 0.024)
- CIE Lab
- lab(40.13 18.18 9.49)
- LCH
- lch(40.13 20.51 27.6)
- CMYK
- cmyk(0% 34% 37% 51%)
ティント · シェード · トーン
ティント
- 8B6360
- 987370
- A48481
- B19492
- BEA5A3
- CBB7B5
- D8C9C7
- E5DAD9
- F2EDEC
シェード
- 6D4744
- 5C3B39
- 4C302E
- 3C2524
- 2D1B1A
- 1F1110
- 110807
- 050202
- 010000
トーン
- 7F5855
- 7F5C59
- 80615E
- 806563
- 806A68
- 806E6D
- 807371
- 807776
- 807C7B
カラーハーモニー
補色 +180°
- 7E5350
Cranberry Red
- 336A6F
≈ Aquarium
類似色 -30° +30°
- 7E5350
Cranberry Red
- 7B5262
≈ Classic Berry
- 7A5740
≈ Wild Bill Brown
トライアド +120° +240°
- 7E5350
Cranberry Red
- 4C694B
≈ Sabal Palm
- 4F6082
≈ Sapphire Earbobs
スプリットコンプリメンタリー +150° +210°
- 7E5350
Cranberry Red
- 3A6B5D
≈ Dignified
- 3D667C
≈ Ocean Storm
テトラード +90° +180° +270°
- 7E5350
Cranberry Red
- 5F643D
≈ Aloe Leaf
- 336A6F
≈ Aquarium
- 625A7E
≈ Psychic
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 6.48:1 · APCA Lc 82
Ag
Fail黒の上
WCAG 3.24:1 · APCA Lc 20
最適な文字色: #FFFFFF
WCAG 6.48:1 (AA) · APCA Lc 82
Contrast pairs
コードスニペット
CSS
:root {
--cranberry-red: #7e5350;
--cranberry-red-rgb: 126 83 80;
--cranberry-red-oklch: oklch(0.489 0.058 23.8);
}
.element {
color: var(--cranberry-red);
background-color: hsl(4 22% 40%);
border-color: oklch(0.489 0.058 23.8);
}Tailwind CSS v4
@theme {
--color-cranberry-red: #7e5350;
--color-cranberry-red-50: #ffefed;
--color-cranberry-red-100: #fbe1de;
--color-cranberry-red-200: #eccbc7;
--color-cranberry-red-300: #d4ada8;
--color-cranberry-red-400: #bf918e;
--color-cranberry-red-500: #aa7773;
--color-cranberry-red-600: #8f6562;
--color-cranberry-red-700: #73514e;
--color-cranberry-red-800: #553a39;
--color-cranberry-red-900: #3b2827;
--color-cranberry-red-950: #251615;
}SCSS
$cranberry-red: #7e5350;
$cranberry-red-rgb: 126, 83, 80;
$cranberry-red-light: mix(#fff, $cranberry-red, 20%);
$cranberry-red-dark: mix(#000, $cranberry-red, 20%);
.element {
color: $cranberry-red;
box-shadow: 0 0 0 2px rgba($cranberry-red, 0.35);
}