Nazwany kolor · #FF724C
Pinkish Orange
Pinkish Orange to #FF724C: rgb(255 114 76), hsl(13 100% 65%), oklch(0.716 0.181 36). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Pinkish Orange color name →
#FF724C
oklch(0.716 0.181 36)
Konwersje koloru
- HEX
- #ff724c
- RGB
- rgb(255 114 76)
- HSL
- hsl(13 100% 65%)
- HWB
- hwb(13 30% 0%)
- OKLCH
- oklch(0.716 0.181 36)
- OKLab
- oklab(0.716 0.146 0.106)
- CIE Lab
- lab(65.55 53.14 48.02)
- LCH
- lch(65.55 71.63 42.1)
- CMYK
- cmyk(0% 55% 70% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FF8260
- FF9172
- FFA084
- FFAE96
- FFBCA8
- FFCAB9
- FFD7CA
- FFE4DC
- FFF2ED
Odcienie ciemniejsze
- DE6241
- BE5336
- 9E442C
- 803622
- 632818
- 481B0F
- 2E0E06
- 160402
- 030100
Tony
- F37553
- E7785A
- DB7A60
- CE7C66
- C27D6B
- B57F70
- A97F74
- 9B8078
- 8E807C
Harmonie kolorów
Komplementarna +180°
- FF724C
Pinkish Orange
- 00B6D6
≈ Ocean Sigh
Analogowa -30° +30°
- FF724C
Pinkish Orange
- FC6B92
≈ Blush Hour
- E58B00
≈ Hotter Butter
Triada +120° +240°
- FF724C
Pinkish Orange
- 00C274
≈ Times Square Screens
- 8B99FF
≈ Periwinkle Blue
Komplementarna rozszczepiona +150° +210°
- FF724C
Pinkish Orange
- 00BCAF
≈ Turquoise Topaz
- 3CAAFF
≈ Xed
Tetrada +90° +180° +270°
- FF724C
Pinkish Orange
- 87B609
≈ Dark Lime
- 00B6D6
≈ Ocean Sigh
- C081FB
≈ Lilac Geode
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.70:1 · APCA Lc 52
Ag
AAANa czerni
WCAG 7.76:1 · APCA Lc 50
Najlepszy kolor tekstu: #000000
WCAG 7.76:1 (AAA) · APCA Lc 50
Contrast pairs
Fragmenty kodu
CSS
:root {
--pinkish-orange: #ff724c;
--pinkish-orange-rgb: 255 114 76;
--pinkish-orange-oklch: oklch(0.716 0.181 36);
}
.element {
color: var(--pinkish-orange);
background-color: hsl(13 100% 65%);
border-color: oklch(0.716 0.181 36);
}Tailwind CSS v4
@theme {
--color-pinkish-orange: #ff724c;
--color-pinkish-orange-50: #ffe4d0;
--color-pinkish-orange-100: #ffd4bc;
--color-pinkish-orange-200: #ffb99c;
--color-pinkish-orange-300: #ff9471;
--color-pinkish-orange-400: #f5704d;
--color-pinkish-orange-500: #e4491a;
--color-pinkish-orange-600: #c0401a;
--color-pinkish-orange-700: #9b3315;
--color-pinkish-orange-800: #742311;
--color-pinkish-orange-900: #52170a;
--color-pinkish-orange-950: #360701;
}SCSS
$pinkish-orange: #ff724c;
$pinkish-orange-rgb: 255, 114, 76;
$pinkish-orange-light: mix(#fff, $pinkish-orange, 20%);
$pinkish-orange-dark: mix(#000, $pinkish-orange, 20%);
.element {
color: $pinkish-orange;
box-shadow: 0 0 0 2px rgba($pinkish-orange, 0.35);
}