Benoemde kleur · #FFB077
Obtrusive Orange
Obtrusive Orange is #FFB077: rgb(255 176 119), hsl(25 100% 73%), oklch(0.821 0.118 56.1). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Orange mean? → · Obtrusive Orange color name →
#FFB077
oklch(0.821 0.118 56.1)
Kleurconversies
- HEX
- #ffb077
- RGB
- rgb(255 176 119)
- HSL
- hsl(25 100% 73%)
- HWB
- hwb(25 47% 0%)
- OKLCH
- oklch(0.821 0.118 56.1)
- OKLab
- oklab(0.821 0.066 0.098)
- CIE Lab
- lab(78.75 25.39 41.24)
- LCH
- lch(78.75 48.43 58.4)
- CMYK
- cmyk(0% 31% 53% 0%)
Tinten · Schaduwen · Tonen
Tinten
- FFB885
- FFC094
- FFC8A1
- FFD0AF
- FFD8BC
- FFE0CA
- FFE8D7
- FFF0E4
- FFF7F2
Schaduwen
- DE9967
- BE8257
- 9E6C47
- 805638
- 63422A
- 482E1C
- 2E1C10
- 160B05
- 030101
Tonen
- F2AB79
- E5A77B
- D8A27C
- CC9D7D
- BF997E
- B2947F
- A68F80
- 998A80
- 8D8580
Kleurharmonieën
Complementair +180°
- FFB077
Obtrusive Orange
- 7FCFFF
≈ Drift on the Sea
Analoog -30° +30°
- FFB077
Obtrusive Orange
- FFABA2
≈ Patient Pink
- E6BF65
≈ Golden Chalice
Triadisch +120° +240°
- FFB077
Obtrusive Orange
- 62DDC2
≈ Ocean in a Bowl
- CAB7FF
≈ Violet Heaven
Gesplitst complementair +150° +210°
- FFB077
Obtrusive Orange
- 52DAEA
≈ Blue Dacnis
- AAC4FF
≈ Pastel Blue
Tetradisch +90° +180° +270°
- FFB077
Obtrusive Orange
- 91D996
≈ Leek
- 7FCFFF
≈ Drift on the Sea
- ECA9ED
≈ Pinky Swear
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.79:1 · APCA Lc 33
Ag
AAAOp zwart
WCAG 11.72:1 · APCA Lc 70
Beste tekstkleur: #000000
WCAG 11.72:1 (AAA) · APCA Lc 70
Contrast pairs
Codefragmenten
CSS
:root {
--obtrusive-orange: #ffb077;
--obtrusive-orange-rgb: 255 176 119;
--obtrusive-orange-oklch: oklch(0.821 0.118 56.1);
}
.element {
color: var(--obtrusive-orange);
background-color: hsl(25 100% 73%);
border-color: oklch(0.821 0.118 56.1);
}Tailwind CSS v4
@theme {
--color-obtrusive-orange: #ffb077;
--color-obtrusive-orange-50: #ffeed5;
--color-obtrusive-orange-100: #ffdfc2;
--color-obtrusive-orange-200: #fbc8a3;
--color-obtrusive-orange-300: #e5a97a;
--color-obtrusive-orange-400: #d38b56;
--color-obtrusive-orange-500: #c06f2c;
--color-obtrusive-orange-600: #a25e27;
--color-obtrusive-orange-700: #824b1f;
--color-obtrusive-orange-800: #613616;
--color-obtrusive-orange-900: #44250e;
--color-obtrusive-orange-950: #2c1302;
}SCSS
$obtrusive-orange: #ffb077;
$obtrusive-orange-rgb: 255, 176, 119;
$obtrusive-orange-light: mix(#fff, $obtrusive-orange, 20%);
$obtrusive-orange-dark: mix(#000, $obtrusive-orange, 20%);
.element {
color: $obtrusive-orange;
box-shadow: 0 0 0 2px rgba($obtrusive-orange, 0.35);
}