Hugging Face color palette
TechHugging Face uses a bright, friendly yellow as its signature color, complemented by a clean, neutral UI palette. The brand's color system emphasizes approachability and clarity in tech and AI contexts.
huggingface.coHugging Face colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Hugging Face YellowPrimary255, 210, 30
- Hugging Face OrangeSecondary255, 184, 0
- Hugging Face CoralAccent255, 92, 53
Surfaces
Page, cards and dividers.- Hugging Face WhiteBackground255, 255, 255
- Hugging Face Light GraySurface246, 248, 250
- Hugging Face Border GrayBorder229, 231, 235
Text
Three tiers of copy.- Hugging Face BlackText26, 26, 26
- Hugging Face Dark GraySecondary text75, 85, 99
- Hugging Face Muted GrayMuted text107, 114, 128
Semantic
Feedback and state colors.- Hugging Face GreenSuccess34, 197, 94
- Hugging Face Warning OrangeWarning245, 158, 66
- Hugging Face RedError239, 68, 68
- Hugging Face BlueInfo59, 130, 246
Use Hugging Face's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hugging-face-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B82F6;
--error: #EF4444;
--accent: #FF5C35;
--border: #E5E7EB;
--primary: #FFD21E;
--success: #22C55E;
--surface: #F6F8FA;
--warning: #F59E42;
--secondary: #FFB800;
--text-muted: #6B7280;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #4B5563;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
16.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.1:1
Pass
Muted text on background
Needs 3:1 for large text
4.8:1
Pass
Muted text on surface
Needs 3:1 for large text
4.5:1
Pass
Hugging Face background, border and text colors
The quiet part of the Hugging Face palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Hugging Face WhiteBackground
- HEX
- RGB
- HSL
- Hugging Face Light GraySurface
- HEX
- RGB
- HSL
- Hugging Face Border GrayBorder
- HEX
- RGB
- HSL
- Hugging Face BlackText
- HEX
- RGB
- HSL
- Hugging Face Dark GraySecondary text
- HEX
- RGB
- HSL
- Hugging Face Muted GrayMuted text
- HEX
- RGB
- HSL
About Hugging Face's colors
Hugging Face's palette centers on a vibrant yellow, supported by warm accents and neutral grays for usability. The color system is designed for clarity, friendliness, and accessibility in digital interfaces.
Primary yellow pairs with orange and coral for warmth.
Neutrals support legibility and content focus.
Accent colors signal status and interactivity.
Psychology
The yellow evokes positivity, friendliness, and approachability, aligning with the brand's open AI ethos. Neutral grays and darks ensure professionalism and readability.
Evolution
The palette has remained stable since Hugging Face's early years, with minor adjustments to neutral tones for improved accessibility. The core yellow has always been central to the brand's identity.
Where Hugging Face uses each color
- Primary
Used in the logo, key CTAs, and highlights across the website.
- Secondary
Appears in illustrations, secondary buttons, and badges.
- Accent
Used for alerts, highlights, and interactive UI elements.
- Backgrounds
White and light gray backgrounds are used for main app and site surfaces.
- Text
Black and dark gray are used for primary and secondary text for optimal readability.
- Semantic
Green, orange, red, and blue are used for status indicators, notifications, and system messages.
Hugging Face color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Hugging Face primary color is #FFD21E. This yellow is used in the logo and main branding elements.
The RGB value for #FFD21E is (255, 210, 30). For CMYK, it is approximately (0, 18, 88, 0).
Hugging Face uses #F6F8FA for light gray surfaces and #E5E7EB for borders. Text uses #1A1A1A for primary and #4B5563 for secondary.
Use #FFD21E for primary actions and highlights, with neutrals for backgrounds and text. Accent and semantic colors are reserved for alerts, statuses, and interactive elements.
The secondary color is Hugging Face Orange, #FFB800, and the accent is Hugging Face Coral, #FF5C35. Together with the primary they make up the three brand colors at the top of this page.
6 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Hugging Face's colors consistently when it generates UI.
Make something in the spirit of Hugging Face
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.