色名 · #FFBB72
Spiced Nectarine
Spiced Nectarineは#FFBB72：rgb(255 187 114)、hsl(31 100% 72%)、oklch(0.84 0.12 66.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Spiced Nectarine color name →
#FFBB72
oklch(0.84 0.12 66.9)
カラー変換
- HEX
- #ffbb72
- RGB
- rgb(255 187 114)
- HSL
- hsl(31 100% 72%)
- HWB
- hwb(31 45% 0%)
- OKLCH
- oklch(0.84 0.12 66.9)
- OKLab
- oklab(0.84 0.047 0.11)
- CIE Lab
- lab(81.23 19.64 46.73)
- LCH
- lch(81.23 50.69 67.2)
- CMYK
- cmyk(0% 27% 55% 0%)
ティント · シェード · トーン
ティント
- FFC282
- FFC990
- FFD09F
- FFD7AD
- FFDEBB
- FFE4C9
- FFEBD6
- FFF2E4
- FFF8F2
シェード
- DEA262
- BE8A53
- 9E7344
- 805C36
- 634628
- 48321B
- 2E1F0E
- 160D04
- 030201
トーン
- F2B575
- E5AF77
- D8AA7A
- CBA47B
- BF9E7D
- B2987E
- A5927F
- 998C7F
- 8C8680
カラーハーモニー
補色 +180°
- FFBB72
Spiced Nectarine
- 9ED0FF
≈ Baby Blue
類似色 -30° +30°
- FFBB72
Spiced Nectarine
- FFB6A1
≈ Nature Apricot
- E1CB6B
≈ Le Bon Dijon
トライアド +120° +240°
- FFBB72
Spiced Nectarine
- 5BE4D7
≈ Near Moon
- DCB9FF
≈ Lavender Fragrance
スプリットコンプリメンタリー +150° +210°
- FFBB72
Spiced Nectarine
- 5EDEFD
≈ Athena Blue
- BDC7FF
≈ Light Periwinkle
テトラード +90° +180° +270°
- FFBB72
Spiced Nectarine
- 84E2AB
≈ Jovial Jade
- 9ED0FF
≈ Baby Blue
- FDACE7
≈ Pink Wink
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.66:1 · APCA Lc 29
Ag
AAA黒の上
WCAG 12.60:1 · APCA Lc 74
最適な文字色: #000000
WCAG 12.60:1 (AAA) · APCA Lc 74
Contrast pairs
コードスニペット
CSS
:root {
--spiced-nectarine: #ffbb72;
--spiced-nectarine-rgb: 255 187 114;
--spiced-nectarine-oklch: oklch(0.84 0.12 66.9);
}
.element {
color: var(--spiced-nectarine);
background-color: hsl(31 100% 72%);
border-color: oklch(0.84 0.12 66.9);
}Tailwind CSS v4
@theme {
--color-spiced-nectarine: #ffbb72;
--color-spiced-nectarine-50: #fff0d1;
--color-spiced-nectarine-100: #ffe1be;
--color-spiced-nectarine-200: #f6cc9d;
--color-spiced-nectarine-300: #e0ac73;
--color-spiced-nectarine-400: #ce904b;
--color-spiced-nectarine-500: #ba7414;
--color-spiced-nectarine-600: #9d6216;
--color-spiced-nectarine-700: #7e4f12;
--color-spiced-nectarine-800: #5e380c;
--color-spiced-nectarine-900: #422707;
--color-spiced-nectarine-950: #2a1500;
}SCSS
$spiced-nectarine: #ffbb72;
$spiced-nectarine-rgb: 255, 187, 114;
$spiced-nectarine-light: mix(#fff, $spiced-nectarine, 20%);
$spiced-nectarine-dark: mix(#000, $spiced-nectarine, 20%);
.element {
color: $spiced-nectarine;
box-shadow: 0 0 0 2px rgba($spiced-nectarine, 0.35);
}