色名 · #FF7913
Orange Popsicle
Orange Popsicleは#FF7913：rgb(255 121 19)、hsl(26 100% 54%)、oklch(0.722 0.188 49.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Orange Popsicle color name →
#FF7913
oklch(0.722 0.188 49.1)
カラー変換
- HEX
- #ff7913
- RGB
- rgb(255 121 19)
- HSL
- hsl(26 100% 54%)
- HWB
- hwb(26 7% 0%)
- OKLCH
- oklch(0.722 0.188 49.1)
- OKLab
- oklab(0.722 0.123 0.142)
- CIE Lab
- lab(66.52 48.84 71.13)
- LCH
- lch(66.52 86.28 55.5)
- CMYK
- cmyk(0% 53% 93% 0%)
ティント · シェード · トーン
ティント
- FF883E
- FF9759
- FFA570
- FFB286
- FFBF9A
- FFCCAF
- FFD9C3
- FFE6D7
- FFF3EB
シェード
- DE680F
- BE580B
- 9E4807
- 803905
- 632B03
- 481D01
- 2E1001
- 160500
- 030100
トーン
- F37B2E
- E77D3E
- DA7F4A
- CE8055
- C1815E
- B58166
- A8816D
- 9B8174
- 8E817A
カラーハーモニー
補色 +180°
- FF7913
Orange Popsicle
- 00B5EC
≈ Cyanite
類似色 -30° +30°
- FF7913
Orange Popsicle
- FF7179
≈ Salmon Rose
- D79800
≈ Orange Satisfaction
トライアド +120° +240°
- FF7913
Orange Popsicle
- 00C196
≈ Blarney
- A392FF
≈ Cobalite
スプリットコンプリメンタリー +150° +210°
- FF7913
Orange Popsicle
- 00BCC2
≈ Maximum Blue Green
- 6CA5FF
≈ Âbi Blue
テトラード +90° +180° +270°
- FF7913
Orange Popsicle
- 5FC040
≈ Zunda Green
- 00B5EC
≈ Cyanite
- D679EF
≈ Calypso Orchid
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.62:1 · APCA Lc 50
Ag
AAA黒の上
WCAG 7.99:1 · APCA Lc 51
最適な文字色: #000000
WCAG 7.99:1 (AAA) · APCA Lc 51
Contrast pairs
コードスニペット
CSS
:root {
--orange-popsicle: #ff7913;
--orange-popsicle-rgb: 255 121 19;
--orange-popsicle-oklch: oklch(0.722 0.188 49.1);
}
.element {
color: var(--orange-popsicle);
background-color: hsl(26 100% 54%);
border-color: oklch(0.722 0.188 49.1);
}Tailwind CSS v4
@theme {
--color-orange-popsicle: #ff7913;
--color-orange-popsicle-50: #ffe7c5;
--color-orange-popsicle-100: #ffd6af;
--color-orange-popsicle-200: #ffbd88;
--color-orange-popsicle-300: #ff9856;
--color-orange-popsicle-400: #f3751b;
--color-orange-popsicle-500: #e25000;
--color-orange-popsicle-600: #bf4500;
--color-orange-popsicle-700: #9a3700;
--color-orange-popsicle-800: #732600;
--color-orange-popsicle-900: #511900;
--color-orange-popsicle-950: #360800;
}SCSS
$orange-popsicle: #ff7913;
$orange-popsicle-rgb: 255, 121, 19;
$orange-popsicle-light: mix(#fff, $orange-popsicle, 20%);
$orange-popsicle-dark: mix(#000, $orange-popsicle, 20%);
.element {
color: $orange-popsicle;
box-shadow: 0 0 0 2px rgba($orange-popsicle, 0.35);
}