Noon color palette
EcommerceNoon is a Middle Eastern ecommerce platform known for its bold yellow brand identity, which stands out in both digital and physical applications. The color system is centered around Noon Yellow, complemented by deep black and neutral grays for UI clarity.
noon.comNoon colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Noon YellowPrimary255, 214, 0
- Noon BlackSecondary35, 31, 32
- Noon Light GrayAccent245, 245, 245
Surfaces
Page, cards and dividers.- Noon WhiteBackground255, 255, 255
- Noon Surface GraySurface250, 250, 250
- Noon Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Noon BlackText35, 31, 32
- Noon Secondary GraySecondary text117, 117, 117
- Noon Muted GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- Noon Success GreenSuccess0, 182, 122
- Noon Warning AmberWarning255, 179, 0
- Noon Error RedError229, 57, 53
- Noon Info BlueInfo2, 136, 209
Use Noon's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
noon-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0288D1;
--error: #E53935;
--accent: #F5F5F5;
--border: #E0E0E0;
--primary: #FFD600;
--success: #00B67A;
--surface: #FAFAFA;
--warning: #FFB300;
--secondary: #231F20;
--text-muted: #BDBDBD;
--background: #FFFFFF;
--text-primary: #231F20;
--text-secondary: #757575;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.3:1
Pass
Text on surface
Needs 4.5:1 for body text
15.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.4:1
Fail
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
1.8:1
Fail
Noon gray and neutral colors
The quiet part of the Noon palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Noon WhiteBackground
- HEX
- RGB
- HSL
- Noon Surface GraySurface
- HEX
- RGB
- HSL
- Noon Border GrayBorder
- HEX
- RGB
- HSL
- Noon BlackText
- HEX
- RGB
- HSL
- Noon Secondary GraySecondary text
- HEX
- RGB
- HSL
- Noon Muted GrayMuted text
- HEX
- RGB
- HSL
About Noon's colors
Noon's palette is anchored by a vibrant yellow, symbolizing energy and visibility, with black and gray tones providing contrast and legibility. The supporting colors ensure clarity and accessibility across digital interfaces.
Primary yellow contrasts with deep black for maximum visibility.
Neutral grays balance the boldness of the yellow.
Accent and semantic colors are used sparingly for functional clarity.
Psychology
Yellow evokes optimism, friendliness, and approachability, making Noon instantly recognizable. Black and gray tones ground the palette, lending a sense of reliability and professionalism.
Evolution
Noon's palette has remained consistent since its launch, maintaining its signature yellow as the core brand identifier. Minor adjustments have been made to gray tones for improved accessibility and digital clarity.
Where Noon uses each color
- Primary
Noon Yellow is used for the logo, primary navigation bar, and key call-to-action buttons.
- Secondary
Noon Black appears in headers, footers, and main text for strong contrast.
- Accent
Noon Light Gray is used as a background for cards and secondary UI elements.
- Backgrounds
Noon White is the default page background for a clean, open look.
- Text
Noon Black and Secondary Gray are used for primary and secondary text across the site.
- Semantic
Success Green, Warning Amber, Error Red, and Info Blue are applied to alerts, notifications, and status indicators.
Noon color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Noon brand color is Noon Yellow, with the hex code #FFD600.
Noon Yellow (#FFD600) in RGB is (255, 214, 0), and in CMYK it is (0, 16, 100, 0).
Noon uses several neutral tones: Noon Black (#231F20), Noon Light Gray (#F5F5F5), Noon Surface Gray (#FAFAFA), and Noon Border Gray (#E0E0E0).
Noon Yellow (#FFD600) should be dominant in branding and primary actions, while black and grays provide structure and readability. Semantic colors are reserved for alerts and status messaging.
The secondary color is Noon Black, #231F20, and the accent is Noon Light Gray, #F5F5F5. Together with the primary they make up the three brand colors at the top of this page.
3 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 Noon's colors consistently when it generates UI.
Make something in the spirit of Noon
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
