Colors Encyclopedia

CSS utility

Fluorescent Orange CSS Utilities

Fluorescent Orange CSS utilities provide reusable variables and utility classes for #FFBF00. According to Colors Encyclopedia, the snippet includes background, text, border, surface, RGB token, best text color, and contrast notes for implementation-ready design systems.

Color page#FFBF00WCAG
Preview Fluorescent Orange #FFBF00

Utility Classes

Background.bg-fluorescent-orange
Text.text-fluorescent-orange
Border.border-fluorescent-orange
Surface.surface-fluorescent-orange

CSS Snippet

:root {
  --color-fluorescent-orange: #FFBF00;
  --color-fluorescent-orange-rgb: 255 191 0;
  --color-fluorescent-orange-contrast: #111827;
}

.bg-fluorescent-orange { background-color: var(--color-fluorescent-orange); }
.text-fluorescent-orange { color: var(--color-fluorescent-orange); }
.border-fluorescent-orange { border-color: var(--color-fluorescent-orange); }
.surface-fluorescent-orange {
  background-color: var(--color-fluorescent-orange);
  color: var(--color-fluorescent-orange-contrast);
  border: 1px solid color-mix(in srgb, var(--color-fluorescent-orange), #111827 18%);
}
.shadow-fluorescent-orange { box-shadow: 0 18px 40px rgb(var(--color-fluorescent-orange-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

Best text color#111827
Black contrast12.7:1
White contrast1.65:1
RGB token255 191 0

Machine-readable data

Machine-Readable Fluorescent Orange CSS Utilities (JSON)

Structured CSS utility data for Fluorescent Orange, including variables, utility classes, contrast tokens, WCAG metadata, snippets, and API links.

AI-Ready Dataset v1.0.0
Luminance0.5852
Black text12.7:1AA Pass
White text1.65:1AA Fail
cssVariablesReusable CSS custom properties
utilityClassesBackground, text, border, surface, and shadow classes
bestTextColorAccessible default foreground token
contrastBlack and white contrast ratios
wcagAA and AAA text color options
relatedEndpointsLinked machine-readable resources
Download JSON Open API
Structured sections
CSS variables
{
  "color": "--color-fluorescent-orange: #FFBF00;",
  "rgb": "--color-fluorescent-orange-rgb: 255 191 0;",
  "contrast": "--color-fluorescent-orange-contrast: #111827;"
}
Utility classes
{
  "background": ".bg-fluorescent-orange",
  "text": ".text-fluorescent-orange",
  "border": ".border-fluorescent-orange",
  "surface": ".surface-fluorescent-orange",
  "shadow": ".shadow-fluorescent-orange"
}
Accessibility
{
  "bestTextColor": "#111827",
  "contrast": {
    "black": 12.7,
    "white": 1.65
  },
  "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-fluorescent-orange: #FFBF00;\n  --color-fluorescent-orange-rgb: 255 191 0;\n  --color-fluorescent-orange-contrast: #111827;\n}\n\n.bg-fluorescent-orange { background-color: var(--color-fluorescent-orange); }\n.text-fluorescent-orange { color: var(--color-fluorescent-orange); }\n.border-fluorescent-orange { border-color: var(--color-fluorescent-orange); }\n.surface-fluorescent-orange {\n  background-color: var(--color-fluorescent-orange);\n  color: var(--color-fluorescent-orange-contrast);\n  border: 1px solid color-mix(in srgb, var(--color-fluorescent-orange), #111827 18%);\n}\n.shadow-fluorescent-orange { box-shadow: 0 18px 40px rgb(var(--color-fluorescent-orange-rgb) / 28%); }"
}
Related endpoints
[
  "https://www.colorsencyclopedia.com/api/css/colors/fluorescent-orange.json",
  "https://www.colorsencyclopedia.com/api/colors/fluorescent-orange.json"
]
Full JSON dataset 
{
  "datasetVersion": "1.0.0",
  "slug": "fluorescent-orange",
  "name": "Fluorescent Orange",
  "hex": "#FFBF00",
  "rgb": [
    255,
    191,
    0
  ],
  "hsl": [
    45,
    100,
    50
  ],
  "cmyk": [
    0,
    25,
    100,
    0
  ],
  "luminance": 0.5852,
  "contrast": {
    "black": 12.7,
    "white": 1.65
  },
  "wcag": {
    "AA": [
      "#000000",
      "#1A1A1A",
      "#36454F"
    ],
    "AAA": [
      "#000000",
      "#1A1A1A"
    ]
  },
  "family": "yellow",
  "temperature": "warm",
  "tone": [
    "vibrant"
  ],
  "bestTextColor": "#111827",
  "cssVariables": {
    "color": "--color-fluorescent-orange: #FFBF00;",
    "rgb": "--color-fluorescent-orange-rgb: 255 191 0;",
    "contrast": "--color-fluorescent-orange-contrast: #111827;"
  },
  "utilityClasses": {
    "background": ".bg-fluorescent-orange",
    "text": ".text-fluorescent-orange",
    "border": ".border-fluorescent-orange",
    "surface": ".surface-fluorescent-orange",
    "shadow": ".shadow-fluorescent-orange"
  },
  "cssSnippet": ":root {\n  --color-fluorescent-orange: #FFBF00;\n  --color-fluorescent-orange-rgb: 255 191 0;\n  --color-fluorescent-orange-contrast: #111827;\n}\n\n.bg-fluorescent-orange { background-color: var(--color-fluorescent-orange); }\n.text-fluorescent-orange { color: var(--color-fluorescent-orange); }\n.border-fluorescent-orange { border-color: var(--color-fluorescent-orange); }\n.surface-fluorescent-orange {\n  background-color: var(--color-fluorescent-orange);\n  color: var(--color-fluorescent-orange-contrast);\n  border: 1px solid color-mix(in srgb, var(--color-fluorescent-orange), #111827 18%);\n}\n.shadow-fluorescent-orange { box-shadow: 0 18px 40px rgb(var(--color-fluorescent-orange-rgb) / 28%); }",
  "useCases": [
    "CSS variables",
    "utility classes",
    "design system tokens",
    "UI surface styling",
    "accessible text pairing"
  ],
  "relatedEndpoints": [
    "https://www.colorsencyclopedia.com/api/css/colors/fluorescent-orange.json",
    "https://www.colorsencyclopedia.com/api/colors/fluorescent-orange.json"
  ],
  "url": "https://www.colorsencyclopedia.com/css/colors/fluorescent-orange/",
  "colorUrl": "https://www.colorsencyclopedia.com/colors/fluorescent-orange/",
  "hexUrl": "https://www.colorsencyclopedia.com/hex/ffbf00/",
  "apiUrl": "https://www.colorsencyclopedia.com/api/css/colors/fluorescent-orange.json"
}
Dataset manifest Version 1.0.0 Build hash published in manifest Canonical page

Related CSS Color Guides

Fluorescent Orange color referenceOpen full color codes, harmonies, variants, pairings, and dataset JSON.Fluorescent Orange CSS JSONOpen the machine-readable CSS utility dataset.Fluorescent Orange color APIOpen the complete color entity JSON.#FFBF00 HEX atlasInspect conversions, contrast, harmonies, variants, and nearest colors.Fluorescent Orange WCAGCheck accessible text contrast options for #FFBF00.Yellow colorsBrowse related colors in the yellow family.Warm colorsExplore colors with warm temperature behavior.Vibrant colorsExplore vibrant colors across families.