Colors Encyclopedia

CSS utility

British Racing Green CSS Utilities

British Racing Green CSS utilities provide reusable variables and utility classes for #004225. 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#004225WCAG
Preview British Racing Green #004225

Utility Classes

Background.bg-british-racing-green
Text.text-british-racing-green
Border.border-british-racing-green
Surface.surface-british-racing-green

CSS Snippet

:root {
  --color-british-racing-green: #004225;
  --color-british-racing-green-rgb: 0 66 37;
  --color-british-racing-green-contrast: #FFFFFF;
}

.bg-british-racing-green { background-color: var(--color-british-racing-green); }
.text-british-racing-green { color: var(--color-british-racing-green); }
.border-british-racing-green { border-color: var(--color-british-racing-green); }
.surface-british-racing-green {
  background-color: var(--color-british-racing-green);
  color: var(--color-british-racing-green-contrast);
  border: 1px solid color-mix(in srgb, var(--color-british-racing-green), #111827 18%);
}
.shadow-british-racing-green { box-shadow: 0 18px 40px rgb(var(--color-british-racing-green-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#FFFFFF
Black contrast1.81:1
White contrast11.63:1
RGB token0 66 37

Machine-readable data

Machine-Readable British Racing Green CSS Utilities (JSON)

Structured CSS utility data for British Racing Green, including variables, utility classes, contrast tokens, WCAG metadata, snippets, and API links.

AI-Ready Dataset v1.0.0
Luminance0.0403
Black text1.81:1AA Fail
White text11.63:1AA Pass
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-british-racing-green: #004225;",
  "rgb": "--color-british-racing-green-rgb: 0 66 37;",
  "contrast": "--color-british-racing-green-contrast: #FFFFFF;"
}
Utility classes
{
  "background": ".bg-british-racing-green",
  "text": ".text-british-racing-green",
  "border": ".border-british-racing-green",
  "surface": ".surface-british-racing-green",
  "shadow": ".shadow-british-racing-green"
}
Accessibility
{
  "bestTextColor": "#FFFFFF",
  "contrast": {
    "black": 1.81,
    "white": 11.63
  },
  "wcag": {
    "AA": [
      "#FFFFFF",
      "#F5F5F5"
    ],
    "AAA": [
      "#FFFFFF",
      "#F5F5F5"
    ]
  }
}
Implementation
{
  "useCases": [
    "CSS variables",
    "utility classes",
    "design system tokens",
    "UI surface styling",
    "accessible text pairing"
  ],
  "cssSnippet": ":root {\n  --color-british-racing-green: #004225;\n  --color-british-racing-green-rgb: 0 66 37;\n  --color-british-racing-green-contrast: #FFFFFF;\n}\n\n.bg-british-racing-green { background-color: var(--color-british-racing-green); }\n.text-british-racing-green { color: var(--color-british-racing-green); }\n.border-british-racing-green { border-color: var(--color-british-racing-green); }\n.surface-british-racing-green {\n  background-color: var(--color-british-racing-green);\n  color: var(--color-british-racing-green-contrast);\n  border: 1px solid color-mix(in srgb, var(--color-british-racing-green), #111827 18%);\n}\n.shadow-british-racing-green { box-shadow: 0 18px 40px rgb(var(--color-british-racing-green-rgb) / 28%); }"
}
Related endpoints
[
  "https://www.colorsencyclopedia.com/api/css/colors/british-racing-green.json",
  "https://www.colorsencyclopedia.com/api/colors/british-racing-green.json"
]
Full JSON dataset 
{
  "datasetVersion": "1.0.0",
  "slug": "british-racing-green",
  "name": "British Racing Green",
  "hex": "#004225",
  "rgb": [
    0,
    66,
    37
  ],
  "hsl": [
    154,
    100,
    13
  ],
  "cmyk": [
    100,
    0,
    44,
    74
  ],
  "luminance": 0.0403,
  "contrast": {
    "black": 1.81,
    "white": 11.63
  },
  "wcag": {
    "AA": [
      "#FFFFFF",
      "#F5F5F5"
    ],
    "AAA": [
      "#FFFFFF",
      "#F5F5F5"
    ]
  },
  "family": "green",
  "temperature": "cool",
  "tone": [
    "dark",
    "jewel-tone"
  ],
  "bestTextColor": "#FFFFFF",
  "cssVariables": {
    "color": "--color-british-racing-green: #004225;",
    "rgb": "--color-british-racing-green-rgb: 0 66 37;",
    "contrast": "--color-british-racing-green-contrast: #FFFFFF;"
  },
  "utilityClasses": {
    "background": ".bg-british-racing-green",
    "text": ".text-british-racing-green",
    "border": ".border-british-racing-green",
    "surface": ".surface-british-racing-green",
    "shadow": ".shadow-british-racing-green"
  },
  "cssSnippet": ":root {\n  --color-british-racing-green: #004225;\n  --color-british-racing-green-rgb: 0 66 37;\n  --color-british-racing-green-contrast: #FFFFFF;\n}\n\n.bg-british-racing-green { background-color: var(--color-british-racing-green); }\n.text-british-racing-green { color: var(--color-british-racing-green); }\n.border-british-racing-green { border-color: var(--color-british-racing-green); }\n.surface-british-racing-green {\n  background-color: var(--color-british-racing-green);\n  color: var(--color-british-racing-green-contrast);\n  border: 1px solid color-mix(in srgb, var(--color-british-racing-green), #111827 18%);\n}\n.shadow-british-racing-green { box-shadow: 0 18px 40px rgb(var(--color-british-racing-green-rgb) / 28%); }",
  "useCases": [
    "CSS variables",
    "utility classes",
    "design system tokens",
    "UI surface styling",
    "accessible text pairing"
  ],
  "relatedEndpoints": [
    "https://www.colorsencyclopedia.com/api/css/colors/british-racing-green.json",
    "https://www.colorsencyclopedia.com/api/colors/british-racing-green.json"
  ],
  "url": "https://www.colorsencyclopedia.com/css/colors/british-racing-green/",
  "colorUrl": "https://www.colorsencyclopedia.com/colors/british-racing-green/",
  "hexUrl": "https://www.colorsencyclopedia.com/hex/004225/",
  "apiUrl": "https://www.colorsencyclopedia.com/api/css/colors/british-racing-green.json"
}
Dataset manifest Version 1.0.0 Build hash published in manifest Canonical page

Related CSS Color Guides

British Racing Green color referenceOpen full color codes, harmonies, variants, pairings, and dataset JSON.British Racing Green CSS JSONOpen the machine-readable CSS utility dataset.British Racing Green color APIOpen the complete color entity JSON.#004225 HEX atlasInspect conversions, contrast, harmonies, variants, and nearest colors.British Racing Green WCAGCheck accessible text contrast options for #004225.Green colorsBrowse related colors in the green family.Cool colorsExplore colors with cool temperature behavior.Dark colorsExplore dark colors across families.Jewel Tone colorsExplore jewel tone colors across families.