Colors Encyclopedia

CSS utility

School Bus Yellow CSS Utilities

School Bus Yellow CSS utilities provide reusable variables and utility classes for #FFD800. 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#FFD800WCAG
Preview School Bus Yellow #FFD800

Utility Classes

Background.bg-school-bus-yellow
Text.text-school-bus-yellow
Border.border-school-bus-yellow
Surface.surface-school-bus-yellow

CSS Snippet

:root {
  --color-school-bus-yellow: #FFD800;
  --color-school-bus-yellow-rgb: 255 216 0;
  --color-school-bus-yellow-contrast: #111827;
}

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

Best text color#111827
Black contrast15.07:1
White contrast1.39:1
RGB token255 216 0

Machine-readable data

Machine-Readable School Bus Yellow CSS Utilities (JSON)

Structured CSS utility data for School Bus Yellow, including variables, utility classes, contrast tokens, WCAG metadata, snippets, and API links.

AI-Ready Dataset v1.0.0
Luminance0.7037
Black text15.07:1AA Pass
White text1.39: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-school-bus-yellow: #FFD800;",
  "rgb": "--color-school-bus-yellow-rgb: 255 216 0;",
  "contrast": "--color-school-bus-yellow-contrast: #111827;"
}
Utility classes
{
  "background": ".bg-school-bus-yellow",
  "text": ".text-school-bus-yellow",
  "border": ".border-school-bus-yellow",
  "surface": ".surface-school-bus-yellow",
  "shadow": ".shadow-school-bus-yellow"
}
Accessibility
{
  "bestTextColor": "#111827",
  "contrast": {
    "black": 15.07,
    "white": 1.39
  },
  "wcag": {
    "AA": [
      "#000000",
      "#1A1A1A",
      "#36454F"
    ],
    "AAA": [
      "#000000",
      "#1A1A1A",
      "#36454F"
    ]
  }
}
Implementation
{
  "useCases": [
    "CSS variables",
    "utility classes",
    "design system tokens",
    "UI surface styling",
    "accessible text pairing"
  ],
  "cssSnippet": ":root {\n  --color-school-bus-yellow: #FFD800;\n  --color-school-bus-yellow-rgb: 255 216 0;\n  --color-school-bus-yellow-contrast: #111827;\n}\n\n.bg-school-bus-yellow { background-color: var(--color-school-bus-yellow); }\n.text-school-bus-yellow { color: var(--color-school-bus-yellow); }\n.border-school-bus-yellow { border-color: var(--color-school-bus-yellow); }\n.surface-school-bus-yellow {\n  background-color: var(--color-school-bus-yellow);\n  color: var(--color-school-bus-yellow-contrast);\n  border: 1px solid color-mix(in srgb, var(--color-school-bus-yellow), #111827 18%);\n}\n.shadow-school-bus-yellow { box-shadow: 0 18px 40px rgb(var(--color-school-bus-yellow-rgb) / 28%); }"
}
Related endpoints
[
  "https://www.colorsencyclopedia.com/api/css/colors/school-bus-yellow.json",
  "https://www.colorsencyclopedia.com/api/colors/school-bus-yellow.json"
]
Full JSON dataset 
{
  "datasetVersion": "1.0.0",
  "slug": "school-bus-yellow",
  "name": "School Bus Yellow",
  "hex": "#FFD800",
  "rgb": [
    255,
    216,
    0
  ],
  "hsl": [
    51,
    100,
    50
  ],
  "cmyk": [
    0,
    15,
    100,
    0
  ],
  "luminance": 0.7037,
  "contrast": {
    "black": 15.07,
    "white": 1.39
  },
  "wcag": {
    "AA": [
      "#000000",
      "#1A1A1A",
      "#36454F"
    ],
    "AAA": [
      "#000000",
      "#1A1A1A",
      "#36454F"
    ]
  },
  "family": "yellow",
  "temperature": "warm",
  "tone": [
    "vibrant"
  ],
  "bestTextColor": "#111827",
  "cssVariables": {
    "color": "--color-school-bus-yellow: #FFD800;",
    "rgb": "--color-school-bus-yellow-rgb: 255 216 0;",
    "contrast": "--color-school-bus-yellow-contrast: #111827;"
  },
  "utilityClasses": {
    "background": ".bg-school-bus-yellow",
    "text": ".text-school-bus-yellow",
    "border": ".border-school-bus-yellow",
    "surface": ".surface-school-bus-yellow",
    "shadow": ".shadow-school-bus-yellow"
  },
  "cssSnippet": ":root {\n  --color-school-bus-yellow: #FFD800;\n  --color-school-bus-yellow-rgb: 255 216 0;\n  --color-school-bus-yellow-contrast: #111827;\n}\n\n.bg-school-bus-yellow { background-color: var(--color-school-bus-yellow); }\n.text-school-bus-yellow { color: var(--color-school-bus-yellow); }\n.border-school-bus-yellow { border-color: var(--color-school-bus-yellow); }\n.surface-school-bus-yellow {\n  background-color: var(--color-school-bus-yellow);\n  color: var(--color-school-bus-yellow-contrast);\n  border: 1px solid color-mix(in srgb, var(--color-school-bus-yellow), #111827 18%);\n}\n.shadow-school-bus-yellow { box-shadow: 0 18px 40px rgb(var(--color-school-bus-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/school-bus-yellow.json",
    "https://www.colorsencyclopedia.com/api/colors/school-bus-yellow.json"
  ],
  "url": "https://www.colorsencyclopedia.com/css/colors/school-bus-yellow/",
  "colorUrl": "https://www.colorsencyclopedia.com/colors/school-bus-yellow/",
  "hexUrl": "https://www.colorsencyclopedia.com/hex/ffd800/",
  "apiUrl": "https://www.colorsencyclopedia.com/api/css/colors/school-bus-yellow.json"
}
Dataset manifest Version 1.0.0 Build hash published in manifest Canonical page

Related CSS Color Guides

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