色名 · #9E003A
Cranberry
Cranberryは#9E003A：rgb(158 0 58)、hsl(338 100% 31%)、oklch(0.446 0.178 11.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Cranberry color name →
#9E003A
oklch(0.446 0.178 11.5)
カラー変換
- HEX
- #9e003a
- RGB
- rgb(158 0 58)
- HSL
- hsl(338 100% 31%)
- HWB
- hwb(338 0% 38%)
- OKLCH
- oklch(0.446 0.178 11.5)
- OKLab
- oklab(0.446 0.175 0.036)
- CIE Lab
- lab(33.7 57.73 15.95)
- LCH
- lch(33.7 59.9 15.4)
- CMYK
- cmyk(0% 100% 63% 38%)
ティント · シェード · トーン
ティント
- AB2E4C
- B7495E
- C26170
- CD7884
- D78E97
- E0A5AB
- E9BBC0
- F1D1D4
- F8E8E9
シェード
- 890031
- 740028
- 600020
- 4D0018
- 3A0010
- 290009
- 180004
- 090001
- 010000
トーン
- 9D2041
- 9C3048
- 9A3D4F
- 984955
- 96535C
- 935D63
- 8F666B
- 8B6F72
- 867879
カラーハーモニー
補色 +180°
- 9E003A
Cranberry
- 00615F
≈ Emerald Stone
類似色 -30° +30°
- 9E003A
Cranberry
- 8F1470
≈ Royal Purpleness
- 8F3200
≈ Red Tone Ink
トライアド +120° +240°
- 9E003A
Cranberry
- 3A6100
≈ Rainforest Matcha
- 00559A
≈ Standing Waters
スプリットコンプリメンタリー +150° +210°
- 9E003A
Cranberry
- 006442
≈ Aotake Bamboo
- 005E74
≈ Lyons Blue
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 8.35:1 · APCA Lc 86
Ag
Fail黒の上
WCAG 2.51:1 · APCA Lc 16
最適な文字色: #FFFFFF
WCAG 8.35:1 (AAA) · APCA Lc 86
Contrast pairs
コードスニペット
CSS
:root {
--cranberry: #9e003a;
--cranberry-rgb: 158 0 58;
--cranberry-oklch: oklch(0.446 0.178 11.5);
}
.element {
color: var(--cranberry);
background-color: hsl(338 100% 31%);
border-color: oklch(0.446 0.178 11.5);
}Tailwind CSS v4
@theme {
--color-cranberry: #9e003a;
--color-cranberry-50: #ffe1e6;
--color-cranberry-100: #ffd0d6;
--color-cranberry-200: #ffb4be;
--color-cranberry-300: #ff8f9c;
--color-cranberry-400: #f46b83;
--color-cranberry-500: #e24267;
--color-cranberry-600: #bf3a58;
--color-cranberry-700: #9a2e46;
--color-cranberry-800: #722035;
--color-cranberry-900: #511524;
--color-cranberry-950: #350513;
}SCSS
$cranberry: #9e003a;
$cranberry-rgb: 158, 0, 58;
$cranberry-light: mix(#fff, $cranberry, 20%);
$cranberry-dark: mix(#000, $cranberry, 20%);
.element {
color: $cranberry;
box-shadow: 0 0 0 2px rgba($cranberry, 0.35);
}