色名 · #F0C48C
Ginger Root Peel
Ginger Root Peelは#F0C48C：rgb(240 196 140)、hsl(34 77% 75%)、oklch(0.846 0.088 72.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Ginger Root Peel color name →
#F0C48C
oklch(0.846 0.088 72.9)
カラー変換
- HEX
- #f0c48c
- RGB
- rgb(240 196 140)
- HSL
- hsl(34 77% 75%)
- HWB
- hwb(34 55% 6%)
- OKLCH
- oklch(0.846 0.088 72.9)
- OKLab
- oklab(0.846 0.026 0.084)
- CIE Lab
- lab(82.14 10.88 34.34)
- LCH
- lch(82.14 36.02 72.4)
- CMYK
- cmyk(0% 18% 42% 6%)
ティント · シェード · トーン
ティント
- F2CA98
- F3D0A4
- F5D6AF
- F7DCBB
- F8E2C6
- FAE8D2
- FBEDDD
- FCF3E8
- FEF9F4
シェード
- D1AA79
- B29167
- 957855
- 786143
- 5D4A33
- 433523
- 2A2114
- 140E07
- 030201
トーン
- E4BD8B
- D9B68B
- CDAF8A
- C2A989
- B7A288
- AC9B86
- A19485
- 968D83
- 8B8782
カラーハーモニー
補色 +180°
- F0C48C
Ginger Root Peel
- A9D0FF
≈ Baby Blue
類似色 -30° +30°
- F0C48C
Ginger Root Peel
- FEBA9F
≈ Pallid Orange
- D7CF8C
≈ Lemon Fennel
トライアド +120° +240°
- F0C48C
Ginger Root Peel
- 84DFDC
≈ Cold Blue
- E1BCF6
≈ Beefy Pink
スプリットコンプリメンタリー +150° +210°
- F0C48C
Ginger Root Peel
- 8ADAF6
≈ Tranquil Pool
- C5C7FF
≈ Light Periwinkle
テトラード +90° +180° +270°
- F0C48C
Ginger Root Peel
- 96DFBC
≈ Birthday King
- A9D0FF
≈ Baby Blue
- F6B6DC
≈ Manga Pink
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.61:1 · APCA Lc 28
Ag
AAA黒の上
WCAG 12.97:1 · APCA Lc 75
最適な文字色: #000000
WCAG 12.97:1 (AAA) · APCA Lc 75
Contrast pairs
コードスニペット
CSS
:root {
--ginger-root-peel: #f0c48c;
--ginger-root-peel-rgb: 240 196 140;
--ginger-root-peel-oklch: oklch(0.846 0.088 72.9);
}
.element {
color: var(--ginger-root-peel);
background-color: hsl(34 77% 75%);
border-color: oklch(0.846 0.088 72.9);
}Tailwind CSS v4
@theme {
--color-ginger-root-peel: #f0c48c;
--color-ginger-root-peel-50: #fff2da;
--color-ginger-root-peel-100: #fae4c8;
--color-ginger-root-peel-200: #ebd0ab;
--color-ginger-root-peel-300: #d2b185;
--color-ginger-root-peel-400: #be9663;
--color-ginger-root-peel-500: #aa7c3f;
--color-ginger-root-peel-600: #8f6936;
--color-ginger-root-peel-700: #73542b;
--color-ginger-root-peel-800: #563d1e;
--color-ginger-root-peel-900: #3c2a14;
--color-ginger-root-peel-950: #251706;
}SCSS
$ginger-root-peel: #f0c48c;
$ginger-root-peel-rgb: 240, 196, 140;
$ginger-root-peel-light: mix(#fff, $ginger-root-peel, 20%);
$ginger-root-peel-dark: mix(#000, $ginger-root-peel, 20%);
.element {
color: $ginger-root-peel;
box-shadow: 0 0 0 2px rgba($ginger-root-peel, 0.35);
}