Colors EncyclopediaCSS utility
Industrial Yellow CSS Utilities
Industrial Yellow CSS utilities provide reusable variables and utility classes for #F3C300. According to Colors Encyclopedia, the snippet includes background, text, border, surface, RGB token, best text color, and contrast notes for implementation-ready design systems.
Preview
Industrial Yellow
#F3C300
Utility Classes
CSS Snippet
:root {
--color-industrial-yellow: #F3C300;
--color-industrial-yellow-rgb: 243 195 0;
--color-industrial-yellow-contrast: #111827;
}
.bg-industrial-yellow { background-color: var(--color-industrial-yellow); }
.text-industrial-yellow { color: var(--color-industrial-yellow); }
.border-industrial-yellow { border-color: var(--color-industrial-yellow); }
.surface-industrial-yellow {
background-color: var(--color-industrial-yellow);
color: var(--color-industrial-yellow-contrast);
border: 1px solid color-mix(in srgb, var(--color-industrial-yellow), #111827 18%);
}
.shadow-industrial-yellow { box-shadow: 0 18px 40px rgb(var(--color-industrial-yellow-rgb) / 28%); }
Usage Examples
Surface cardUse for panels, labels, badges, and interface accents.
Border accentUse as a soft divider or outline color.
Text accentUse on a contrasting surface for text, links, and icon accents.
Implementation Notes
Machine-readable data
Machine-Readable Industrial Yellow CSS Utilities (JSON)
Structured CSS utility data for Industrial Yellow, including variables, utility classes, contrast tokens, WCAG metadata, snippets, and API links.
Luminance0.5808
Black text12.62:1AA Pass
White text1.66:1AA Fail
cssVariablesReusable CSS custom propertiesutilityClassesBackground, text, border, surface, and shadow classesbestTextColorAccessible default foreground tokencontrastBlack and white contrast ratioswcagAA and AAA text color optionsrelatedEndpointsLinked machine-readable resourcesStructured sections
CSS variables
{
"color": "--color-industrial-yellow: #F3C300;",
"rgb": "--color-industrial-yellow-rgb: 243 195 0;",
"contrast": "--color-industrial-yellow-contrast: #111827;"
}Utility classes
{
"background": ".bg-industrial-yellow",
"text": ".text-industrial-yellow",
"border": ".border-industrial-yellow",
"surface": ".surface-industrial-yellow",
"shadow": ".shadow-industrial-yellow"
}Accessibility
{
"bestTextColor": "#111827",
"contrast": {
"black": 12.62,
"white": 1.66
},
"wcag": {
"AA": [
"#000000",
"#1A1A1A",
"#36454F"
],
"AAA": [
"#000000",
"#1A1A1A"
]
}
}Implementation
{
"useCases": [
"CSS variables",
"utility classes",
"design system tokens",
"UI surface styling",
"accessible text pairing"
],
"cssSnippet": ":root {\n --color-industrial-yellow: #F3C300;\n --color-industrial-yellow-rgb: 243 195 0;\n --color-industrial-yellow-contrast: #111827;\n}\n\n.bg-industrial-yellow { background-color: var(--color-industrial-yellow); }\n.text-industrial-yellow { color: var(--color-industrial-yellow); }\n.border-industrial-yellow { border-color: var(--color-industrial-yellow); }\n.surface-industrial-yellow {\n background-color: var(--color-industrial-yellow);\n color: var(--color-industrial-yellow-contrast);\n border: 1px solid color-mix(in srgb, var(--color-industrial-yellow), #111827 18%);\n}\n.shadow-industrial-yellow { box-shadow: 0 18px 40px rgb(var(--color-industrial-yellow-rgb) / 28%); }"
}Related endpoints
[
"https://www.colorsencyclopedia.com/api/css/colors/industrial-yellow.json",
"https://www.colorsencyclopedia.com/api/colors/industrial-yellow.json"
]Full JSON dataset
{
"datasetVersion": "1.0.0",
"slug": "industrial-yellow",
"name": "Industrial Yellow",
"hex": "#F3C300",
"rgb": [
243,
195,
0
],
"hsl": [
48,
100,
48
],
"cmyk": [
0,
20,
100,
5
],
"luminance": 0.5808,
"contrast": {
"black": 12.62,
"white": 1.66
},
"wcag": {
"AA": [
"#000000",
"#1A1A1A",
"#36454F"
],
"AAA": [
"#000000",
"#1A1A1A"
]
},
"family": "yellow",
"temperature": "warm",
"tone": [
"vibrant"
],
"bestTextColor": "#111827",
"cssVariables": {
"color": "--color-industrial-yellow: #F3C300;",
"rgb": "--color-industrial-yellow-rgb: 243 195 0;",
"contrast": "--color-industrial-yellow-contrast: #111827;"
},
"utilityClasses": {
"background": ".bg-industrial-yellow",
"text": ".text-industrial-yellow",
"border": ".border-industrial-yellow",
"surface": ".surface-industrial-yellow",
"shadow": ".shadow-industrial-yellow"
},
"cssSnippet": ":root {\n --color-industrial-yellow: #F3C300;\n --color-industrial-yellow-rgb: 243 195 0;\n --color-industrial-yellow-contrast: #111827;\n}\n\n.bg-industrial-yellow { background-color: var(--color-industrial-yellow); }\n.text-industrial-yellow { color: var(--color-industrial-yellow); }\n.border-industrial-yellow { border-color: var(--color-industrial-yellow); }\n.surface-industrial-yellow {\n background-color: var(--color-industrial-yellow);\n color: var(--color-industrial-yellow-contrast);\n border: 1px solid color-mix(in srgb, var(--color-industrial-yellow), #111827 18%);\n}\n.shadow-industrial-yellow { box-shadow: 0 18px 40px rgb(var(--color-industrial-yellow-rgb) / 28%); }",
"useCases": [
"CSS variables",
"utility classes",
"design system tokens",
"UI surface styling",
"accessible text pairing"
],
"relatedEndpoints": [
"https://www.colorsencyclopedia.com/api/css/colors/industrial-yellow.json",
"https://www.colorsencyclopedia.com/api/colors/industrial-yellow.json"
],
"url": "https://www.colorsencyclopedia.com/css/colors/industrial-yellow/",
"colorUrl": "https://www.colorsencyclopedia.com/colors/industrial-yellow/",
"hexUrl": "https://www.colorsencyclopedia.com/hex/f3c300/",
"apiUrl": "https://www.colorsencyclopedia.com/api/css/colors/industrial-yellow.json"
}