Lemon is a cheerful, vivid yellow that exudes freshness and energy. It's found between yellow and green on the color wheel. With its sunny tone and bright appearance, it pairs well with zesty yellows and citrus hues. Use it in designs to infuse a lively and eye-catching vibe.
Lemon is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #FFF700
- RGB value: 100.0% red, 96.9% green, 0.0% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines
For variations within the same spectrum as lemon, consider:
- Bright Yellow (#ffed29): This color mirrors the vivid vibrancy you would expect from Lemon, capturing that cheerful, eye-catching hue that keeps things lively.
- Saffron (#f1c338): Saffron shares a similarly zesty undertone with Lemon, adding a touch of warmth while maintaining a fresh, vivid yellow appearance.
- Yellow (#ffde21): Yellow closely aligns with Lemon in its bright and sunny tone, exuding a sense of freshness and energy typical of a Lemon-yellow color.
- Pastel Yellow (#ffee8c): This softer version of Lemon retains the lively yellow shade but offers a more muted, gentle approach that makes it perfect for a spring palette.
To complement Lemon, consider pairing it with:
- Navy Blue (#000080): Offers a striking contrast, balancing Lemon's brightness with its deep, sophisticated shade.
- Dark Green (#06402B): Enhances Lemon's fresh vibrancy by bringing a nature-inspired, earthy depth to the palette.
- Plum (#8E4585): Adds a luxurious touch, with its rich and warm tones standing out against Lemon's cheerful brightness.
- Cream (#FDFBD4): Provides a soft, neutral backdrop, allowing Lemon's lively and fresh color to shine.
- Coral (#FF8559): Infuses warmth and energy, creating a harmonious spring palette that feels both vibrant and welcoming.
While Lemon is a bright and cheerful color, it may clash with:
- Forest Green (#2E6F40): The deep, muted tones of forest green can make lemon yellow seem overly bright and jarring when placed together.
- Olive Green (#636B2F): Lemon's vividness clashes with olive green, which can lead to an unbalanced and potentially muddy visual impression.
- Dark Yellow (#BA8E23): The similar hues but different intensities between lemon and dark yellow can create a visual tension that feels unsettling.
- Crimson Red (#B22222): The intense warmth and depth of crimson red can overpower lemon yellow, leading to an overwhelming and clashing palette.
- Dark Purple (#341539): The rich intensity of dark purple may overshadow the lively quality of lemon, resulting in a heavy and imbalanced combination.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Radiant Fiesta
Sunny Splash
Blazing Azure
Contrast checker
Contrast 1.13
- Large Text
#FFF700
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 18.56
- Large Text
#FFF700
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #FFF700, known as Lemon, has RGB values of R:255, G:247, B:0 and CMYK values of C:0, M:3, Y:100, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #FFF700 | #FFF700 |
| RGB DECIMAL | 255, 247, 0 | RGB(255,247,0) |
| RGB PERCENTAGE | 100.0, 96.9, 0.0 | RGB(100.0%,96.9%,0.0%) |
| CMYK | 0, 3, 100, 0 | |
| HSL | HSL(58.1, 100.0%, 50.0%) | HSL(58.1, 100.0%, 50.0%) |
| HSV (OR HSB) | 58.1°, 100.0, 100.0 | |
| WEB SAFE | #2552550 | #2552550 |
| BINARY | 11111111, 11110111, 00000000 | |
| iOS - SwiftUI | Color(red: 1.000, green: 0.969, blue: 0.000) | |
| iOS - UIKit | UIColor(red: 1.000, green: 0.969, blue: 0.000, alpha: 1) | |
| Android - Compose | Color(0xFFFFF700) |
