色名 · #AB7A71
Cranberry Foule
Cranberry Fouleは#AB7A71：rgb(171 122 113)、hsl(9 26% 56%)、oklch(0.626 0.063 30.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Cranberry Foule color name →
#AB7A71
oklch(0.626 0.063 30.6)
カラー変換
- HEX
- #ab7a71
- RGB
- rgb(171 122 113)
- HSL
- hsl(9 26% 56%)
- HWB
- hwb(9 44% 33%)
- OKLCH
- oklch(0.626 0.063 30.6)
- OKLab
- oklab(0.626 0.055 0.032)
- CIE Lab
- lab(56.1 18.79 12.94)
- LCH
- lch(56.1 22.82 34.5)
- CMYK
- cmyk(0% 29% 34% 33%)
ティント · シェード · トーン
ティント
- B4877E
- BC948C
- C5A19A
- CDAEA8
- D6BBB6
- DEC8C4
- E6D6D3
- EFE3E1
- F7F1F0
シェード
- 946961
- 7E5952
- 684943
- 543A35
- 402B27
- 2D1D1A
- 1B100E
- 0B0504
- 010101
トーン
- A77B73
- A37B74
- 9F7C76
- 9B7D77
- 967D79
- 927E7A
- 8E7F7C
- 897F7D
- 85807F
カラーハーモニー
補色 +180°
- AB7A71
Cranberry Foule
- 58939E
≈ Manitou Blue
類似色 -30° +30°
- AB7A71
Cranberry Foule
- A97886
≈ Mauve Madness
- A57F61
≈ Spiced Honey
トライアド +120° +240°
- AB7A71
Cranberry Foule
- 6C9374
≈ Watercress
- 7986AF
≈ Corsican Purple
スプリットコンプリメンタリー +150° +210°
- AB7A71
Cranberry Foule
- 5B958A
≈ Fiddler
- 658DAB
≈ Treasure Map Waters
テトラード +90° +180° +270°
- AB7A71
Cranberry Foule
- 828E63
≈ Green Coconut
- 58939E
≈ Manitou Blue
- 8E80A9
≈ Violet Chalk
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.64:1 · APCA Lc 64
Ag
AA黒の上
WCAG 5.75:1 · APCA Lc 38
最適な文字色: #000000
WCAG 5.75:1 (AA) · APCA Lc 38
Contrast pairs
コードスニペット
CSS
:root {
--cranberry-foule: #ab7a71;
--cranberry-foule-rgb: 171 122 113;
--cranberry-foule-oklch: oklch(0.626 0.063 30.6);
}
.element {
color: var(--cranberry-foule);
background-color: hsl(9 26% 56%);
border-color: oklch(0.626 0.063 30.6);
}Tailwind CSS v4
@theme {
--color-cranberry-foule: #ab7a71;
--color-cranberry-foule-50: #ffefea;
--color-cranberry-foule-100: #fce1db;
--color-cranberry-foule-200: #eecbc3;
--color-cranberry-foule-300: #d6aca3;
--color-cranberry-foule-400: #c19188;
--color-cranberry-foule-500: #ac776d;
--color-cranberry-foule-600: #91655c;
--color-cranberry-foule-700: #75504a;
--color-cranberry-foule-800: #563a36;
--color-cranberry-foule-900: #3c2825;
--color-cranberry-foule-950: #261613;
}SCSS
$cranberry-foule: #ab7a71;
$cranberry-foule-rgb: 171, 122, 113;
$cranberry-foule-light: mix(#fff, $cranberry-foule, 20%);
$cranberry-foule-dark: mix(#000, $cranberry-foule, 20%);
.element {
color: $cranberry-foule;
box-shadow: 0 0 0 2px rgba($cranberry-foule, 0.35);
}