色名 · #997964
Fudge Bar
Fudge Barは#997964：rgb(153 121 100)、hsl(24 21% 50%)、oklch(0.601 0.051 54.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Fudge Bar color name →
#997964
oklch(0.601 0.051 54.8)
カラー変換
- HEX
- #997964
- RGB
- rgb(153 121 100)
- HSL
- hsl(24 21% 50%)
- HWB
- hwb(24 39% 40%)
- OKLCH
- oklch(0.601 0.051 54.8)
- OKLab
- oklab(0.601 0.029 0.041)
- CIE Lab
- lab(53.56 10.59 16.54)
- LCH
- lch(53.56 19.64 57.4)
- CMYK
- cmyk(0% 21% 35% 40%)
ティント · シェード · トーン
ティント
- A38673
- AD9381
- B7A090
- C1ADA0
- CCBAAF
- D6C8BF
- E0D5CE
- EAE3DE
- F5F1EF
シェード
- 846856
- 705848
- 5D483B
- 4A392E
- 382B22
- 271D16
- 17100B
- 080503
- 010100
トーン
- 977A67
- 947B6A
- 927B6D
- 8F7C70
- 8D7D72
- 8A7D75
- 887E78
- 857F7B
- 837F7D
カラーハーモニー
補色 +180°
- 997964
Fudge Bar
- 63869B
≈ Seal Pup
類似色 -30° +30°
- 997964
Fudge Bar
- 9D7572
≈ Southern Road
- 8F7F5E
≈ Mushroom Forest
トライアド +120° +240°
- 997964
Fudge Bar
- 608B7F
≈ Chlorite
- 827B9C
≈ Garden Violets
スプリットコンプリメンタリー +150° +210°
- 997964
Fudge Bar
- 5C8A8F
≈ Dusty Turquoise
- 7281A0
≈ Berwick Berry
テトラード +90° +180° +270°
- 997964
Fudge Bar
- 6E896E
≈ Wonderland
- 63869B
≈ Seal Pup
- 907792
≈ Passion Fruit
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.98:1 · APCA Lc 67
Ag
AA黒の上
WCAG 5.27:1 · APCA Lc 35
最適な文字色: #000000
WCAG 5.27:1 (AA) · APCA Lc 35
Contrast pairs
コードスニペット
CSS
:root {
--fudge-bar: #997964;
--fudge-bar-rgb: 153 121 100;
--fudge-bar-oklch: oklch(0.601 0.051 54.8);
}
.element {
color: var(--fudge-bar);
background-color: hsl(24 21% 50%);
border-color: oklch(0.601 0.051 54.8);
}Tailwind CSS v4
@theme {
--color-fudge-bar: #997964;
--color-fudge-bar-50: #fff2e8;
--color-fudge-bar-100: #f6e4d8;
--color-fudge-bar-200: #e6cfc0;
--color-fudge-bar-300: #ccb19f;
--color-fudge-bar-400: #b79782;
--color-fudge-bar-500: #a17e66;
--color-fudge-bar-600: #886a57;
--color-fudge-bar-700: #6d5545;
--color-fudge-bar-800: #513e32;
--color-fudge-bar-900: #382a22;
--color-fudge-bar-950: #231811;
}SCSS
$fudge-bar: #997964;
$fudge-bar-rgb: 153, 121, 100;
$fudge-bar-light: mix(#fff, $fudge-bar, 20%);
$fudge-bar-dark: mix(#000, $fudge-bar, 20%);
.element {
color: $fudge-bar;
box-shadow: 0 0 0 2px rgba($fudge-bar, 0.35);
}