11 Spectrum Families·168 Handcrafted Shades·WCAG Tested

Color Library & Shade Directory

Explore curated spectrum families, design psychology, complementary pairings, and iconic shades. Filter in real-time, inspect WCAG contrast ratios, and copy HEX, RGB, HSL, or CSS variables with one click.

Color Studio

Color FamiliesFrom Red to White

168

Curated ShadesHistorical & Modern UI

WCAG 2.2 TestedAAA & AA Contrast

1-Click CodeHEX, RGB, HSL, CSS

CrimsonRed Family

#DC143C·Contrast: 5.0:1 on White

Family Shades:

Crimson

Ruby

Scarlet

Carmine

Burgundy

Wine

Cherry

Maroon

Vermilion

FireBrick

Madder Red

Rosewood

Blood Red

Cardinal Red

Venetian Red

Coral Red

Harmonies

Tones:

Shades of Red

16 Shadeswarm Tone

Passion, Urgency, Vitality & Bold Action

Red is the most visually striking and stimulating wavelength on the visible spectrum. Evoking appetite, urgency, strength, and raw energy, red is the preeminent choice for high-priority user notifications, prominent calls-to-action, sale badges, and energetic brand identities.

Psychology & Signals

Energy & VitalityCourage & PowerExcitement & RomanceUrgency & Focus

Recommended Harmonious Pairings

Accessibility Tip:Red text on white backgrounds requires a darker shade like Crimson (#DC143C) or Wine (#722F37) to meet the 4.5:1 WCAG AA minimum standard.

White 5.0:1 (AA)

Crimson

Vibrant, deep red with subtle blue undertones; quintessential primary accent.

White 4.8:1 (AA)

Ruby

Precious gemstone red with radiant magenta warmth.

White 3.8:1 (AA Large)

Scarlet

Bright, fiery red leaning subtly towards vivid orange.

White 9.1:1 (AAA)

Carmine

Intense, velvety red derived from ancient natural pigments.

White 10.8:1 (AAA)

Burgundy

Rich, luxurious wine red associated with heritage and sophistication.

White 9.6:1 (AAA)

Wine

Deep fermented red with subtle earthiness and strong contrast.

White 5.5:1 (AA)

Cherry

Sweet, bright, fruit-forward red with high visual recognition.

White 10.9:1 (AAA)

Maroon

Traditional dark brownish-red for editorial stability and regal badges.

White 4.1:1 (AA Large)

Vermilion

Brilliant cinnabar pigment favored in classical fine art and ceramics.

White 6.7:1 (AA)

FireBrick

Sturdy, architectural red with earthen terracotta warmth.

White 8.0:1 (AAA)

Madder Red

Historic natural botanical crimson dye renowned for rich antiquity and depth.

White 13.5:1 (AAA)

Rosewood

Ultra-deep dark crimson resembling polished vintage timber.

White 13.5:1 (AAA)

Blood Red

Intense, dramatic dark shade with maximal contrast against light canvas.

White 5.8:1 (AA)

Cardinal Red

Vivid ecclesiastical red conveying historic authority.

White 6.0:1 (AA)

Venetian Red

Historic warm earth pigment with iron oxide tones.

Black 6.1:1 (AA)

Coral Red

Playful, modern coral-tinted red with approachable digital warmth.

Swatch	Name	HEX Code	RGB Values	HSL Values	OKLCH	Lightness & Lum	WCAG Contrast	Actions
						L: 47%(0.16)	White 5.0:1 (AA)
						L: 47%(0.171)	White 4.8:1 (AA)
						L: 50%(0.225)	White 3.8:1 (AA Large)
						L: 29%(0.065)	White 9.1:1 (AAA)
						L: 25%(0.047)	White 10.8:1 (AAA)
						L: 32%(0.059)	White 9.6:1 (AAA)
						L: 42%(0.14)	White 5.5:1 (AA)
						L: 25%(0.046)	White 10.9:1 (AAA)
						L: 55%(0.205)	White 4.1:1 (AA Large)
						L: 42%(0.107)	White 6.7:1 (AA)
						L: 32%(0.081)	White 8.0:1 (AAA)
						L: 20%(0.028)	White 13.5:1 (AAA)
						L: 20%(0.028)	White 13.5:1 (AAA)
						L: 44%(0.13)	White 5.8:1 (AA)
						L: 41%(0.125)	White 6.0:1 (AA)
						L: 63%(0.253)	Black 6.1:1 (AA)

Shades of Blue

16 Shadescool Tone

Trust, Reliability, Intelligence & Cognitive Clarity

Blue is the undisputed king of digital product design. Channeling the boundless calm of the sky and the steady depth of the ocean, blue projects unshakeable security, logical precision, and technical credibility. Preferred worldwide by enterprise software, healthcare, and fintech platforms.

Psychology & Signals

Trust & CredibilitySerenity & LogicIntelligence & WisdomSafety & Stability

Recommended Harmonious Pairings

Accessibility Tip:RoyalBlue (#4169E1) and Navy (#000080) easily pass WCAG AAA (7:1) contrast against pure white backgrounds.

White 4.8:1 (AA)

Royal Blue

Luminous, commanding blue engineered for primary digital interfaces.

White 15.9:1 (AAA)

Navy

Authoritative, timeless dark blue ideal for headers and corporate trust.

White 8.5:1 (AAA)

Cobalt

Vibrant, saturated mineral blue with striking editorial presence.

White 7.1:1 (AAA)

Sapphire

Deep gemstone blue balancing electric brilliance with dignity.

White 14.8:1 (AAA)

Midnight Blue

Inky nocturnal blue approaching black with subtle indigo resonance.

Black 6.5:1 (AA)

Dodger Blue

Optimistic, vivid digital cyan-blue for interactive hover states.

Black 12.1:1 (AAA)

Sky Blue

Airy, peaceful pastel blue evoking clear open horizons.

White 4.1:1 (AA Large)

Steel Blue

Muted, industrial blue with sophisticated gray undertones.

White 4.8:1 (AA)

Cerulean

Classic azure-cyan hybrid celebrated in impressionist art and modern UI.

White 13.5:1 (AAA)

Prussian Blue

Synthetic historical pigment with deep, melancholic oceanic depths.

Black 16.3:1 (AAA)

Ice Blue

Glacial, refreshing ultra-light cyan for modern card backgrounds.

White 6.1:1 (AA)

Denim

Casual, durable workwear blue with friendly accessibility.

White 10.2:1 (AAA)

Egyptian Blue

One of humanity’s oldest synthetic pigments with regal warmth.

Black 16.9:1 (AAA)

Electric Blue

High-energy, futuristic cyan accent for dark mode neon pops.

White 3.9:1 (AA Large)

Glaucous

Gentle powdery blue-gray popular in Scandinavian design.

Black 14.7:1 (AAA)

Powder Blue

Delicate, soothing pale blue excellent for secondary pill tags.

Swatch	Name	HEX Code	RGB Values	HSL Values	OKLCH	Lightness & Lum	WCAG Contrast	Actions
						L: 57%(0.167)	White 4.8:1 (AA)
						L: 25%(0.016)	White 15.9:1 (AAA)
						L: 34%(0.074)	White 8.5:1 (AAA)
						L: 39%(0.097)	White 7.1:1 (AAA)
						L: 27%(0.021)	White 14.8:1 (AAA)
						L: 56%(0.274)	Black 6.5:1 (AA)
						L: 73%(0.553)	Black 12.1:1 (AAA)
						L: 49%(0.206)	White 4.1:1 (AA Large)
						L: 33%(0.17)	White 4.8:1 (AA)
						L: 16%(0.028)	White 13.5:1 (AAA)
						L: 81%(0.764)	Black 16.3:1 (AAA)
						L: 41%(0.122)	White 6.1:1 (AA)
						L: 36%(0.053)	White 10.2:1 (AAA)
						L: 75%(0.793)	Black 16.9:1 (AAA)
						L: 55%(0.218)	White 3.9:1 (AA Large)
						L: 80%(0.683)	Black 14.7:1 (AAA)

Shades of Green

16 Shadescool Tone

Growth, Health, Nature, Wealth & Renewal

Green bridges the natural organic world with digital success states. Associated with vitality, ecological mindfulness, biological wellness, and financial abundance, green is the universal digital convention for completed transactions, safe states, and eco-friendly products.

Psychology & Signals

Renewal & HarmonyHealth & VitalityWealth & SuccessTranquility & Balance

Recommended Harmonious Pairings

Accessibility Tip:Light greens (like Lime or Mint) often fail text contrast on white; use Forest (#228B22) or Pine (#01796F) for compliant body typography.

Black 9.9:1 (AAA)

Emerald

Lush, radiant jewel green synonymous with refined prosperity.

White 4.4:1 (AA Large)

Forest Green

Deep organic canopy green conveying grounded stability and tradition.

Black 6.8:1 (AA)

Jade

Polished imperial green with timeless balance and purity.

Black 8.1:1 (AAA)

Mint

Crisp, contemporary green-cyan pairing freshness with digital friendliness.

Black 10.4:1 (AAA)

Sage

Earthy, muted botanical green trending strongly in wellness aesthetics.

White 4.2:1 (AA Large)

Olive

Savory, military-tested yellow-green with rugged dependability.

Black 9.9:1 (AAA)

Lime Green

Electric, punchy citrus green for high-visibility highlights.

White 4.8:1 (AA)

Teal

Harmonious marriage of oceanic blue and deep botanical green.

White 4.3:1 (AA Large)

Sea Green

Soothing maritime tone evoking coastal swells and marine flora.

White 5.3:1 (AA)

Pine Green

Dense, aromatic evergreen tone with high typographical contrast.

Black 10.5:1 (AAA)

Pistachio

Creamy, nut-derived pale yellow-green for organic packaging.

White 4.5:1 (AA)

Viridian

Chromium oxide pigment favored by masters for velvety atmospheric richness.

Black 14.1:1 (AAA)

Celadon

Ancient glazed ceramic pale green with subtle gray tranquility.

Black 16.2:1 (AAA)

Chartreuse

High-visibility liqueur green radiating pure energy and bold confidence.

White 7.4:1 (AAA)

Hunter Green

Distinguished equestrian deep green reminiscent of classic tweed and leather.

Black 6.1:1 (AA)

Shamrock

Symbolic emerald clover green representing luck, vibrancy, and joy.

Swatch	Name	HEX Code	RGB Values	HSL Values	OKLCH	Lightness & Lum	WCAG Contrast	Actions
						L: 55%(0.444)	Black 9.9:1 (AAA)
						L: 34%(0.189)	White 4.4:1 (AA Large)
						L: 33%(0.291)	Black 6.8:1 (AA)
						L: 47%(0.355)	Black 8.1:1 (AAA)
						L: 64%(0.469)	Black 10.4:1 (AAA)
						L: 25%(0.2)	White 4.2:1 (AA Large)
						L: 50%(0.446)	Black 9.9:1 (AAA)
						L: 25%(0.17)	White 4.8:1 (AA)
						L: 36%(0.197)	White 4.3:1 (AA Large)
						L: 24%(0.148)	White 5.3:1 (AA)
						L: 61%(0.474)	Black 10.5:1 (AAA)
						L: 38%(0.182)	White 4.5:1 (AA)
						L: 78%(0.657)	Black 14.1:1 (AAA)
						L: 50%(0.76)	Black 16.2:1 (AAA)
						L: 29%(0.091)	White 7.4:1 (AAA)
						L: 31%(0.253)	Black 6.1:1 (AA)

Shades of Yellow

16 Shadeswarm Tone

Optimism, Warmth, Clarity & Creative Spark

Yellow is the most luminous hue in the visible spectrum, commanding immediate optical focus. Channeling the boundless radiance of sunlight, yellow evokes joy, inventive curiosity, and spontaneous optimism. In UI design, it serves as an irresistible accent, warning indicator, or star rating tone.

Psychology & Signals

Optimism & JoyCreativity & IntellectCaution & AttentionWarmth & Spontaneity

Recommended Harmonious Pairings

Accessibility Tip:Yellow text almost universally fails WCAG AA on white backgrounds. Always pair yellow with dark backgrounds like #0F172A (contrast > 12:1).

Black 15.0:1 (AAA)

Gold

Warm, precious metal tone signifying quality, awards, and premium craft.

Black 12.7:1 (AAA)

Amber

Luminous fossil resin tone balancing golden radiance with orange warmth.

Black 20.0:1 (AAA)

Canary

Soft feathered pastel yellow injecting gentle cheer into card headers.

Black 15.5:1 (AAA)

Mustard

Earthy, spicy culinary yellow with modern retro sophistication.

Black 18.3:1 (AAA)

Lemon

Zesty, sharp citrus yellow for radiant high-impact digital accents.

Black 12.8:1 (AAA)

Saffron

Exotic botanical gold steeped in cultural ceremonial heritage.

Black 15.2:1 (AAA)

Flaxen

Pale linen straw yellow conveying organic calm and natural authenticity.

Black 10.1:1 (AAA)

Butterscotch

Creamy caramel-yellow warmth evoking comfort, baking, and nostalgia.

Black 13.3:1 (AAA)

Citrine

Crystalline quartz tone bridging citrus spark with regal stone brightness.

Black 20.2:1 (AAA)

Cream

Soft dairy-white yellow offering a forgiving, warm alternative to sterile white.

Black 18.4:1 (AAA)

Cadmium Yellow

Standard industrial art pigment possessing absolute spectral purity.

Black 15.3:1 (AAA)

Naples Yellow

Historical lead antimoniate pigment with delicate, chalky elegance.

Black 15.7:1 (AAA)

Jasmine

Fragrant floral pale gold suitable for cosmetic and lifestyle branding.

Black 18.6:1 (AAA)

Icterine

Striking bird plumage yellow offering high luminescence in light mode.

Black 9.4:1 (AAA)

Goldenrod

Wild prairie botanical yellow with grounded, mature visibility.

Black 17.3:1 (AAA)

Maize

Harvest corn yellow celebrating fertility, agricultural richness, and sustenance.

Swatch	Name	HEX Code	RGB Values	HSL Values	OKLCH	Lightness & Lum	WCAG Contrast	Actions
						L: 50%(0.699)	Black 15.0:1 (AAA)
						L: 50%(0.585)	Black 12.7:1 (AAA)
						L: 80%(0.951)	Black 20.0:1 (AAA)
						L: 67%(0.726)	Black 15.5:1 (AAA)
						L: 65%(0.865)	Black 18.3:1 (AAA)
						L: 57%(0.589)	Black 12.8:1 (AAA)
						L: 72%(0.71)	Black 15.2:1 (AAA)
						L: 65%(0.453)	Black 10.1:1 (AAA)
						L: 47%(0.616)	Black 13.3:1 (AAA)
						L: 91%(0.961)	Black 20.2:1 (AAA)
						L: 50%(0.872)	Black 18.4:1 (AAA)
						L: 67%(0.713)	Black 15.3:1 (AAA)
						L: 73%(0.737)	Black 15.7:1 (AAA)
						L: 68%(0.88)	Black 18.6:1 (AAA)
						L: 49%(0.419)	Black 9.4:1 (AAA)
						L: 67%(0.813)	Black 17.3:1 (AAA)

Shades of Orange

16 Shadeswarm Tone

Dynamism, Enthusiasm, Approachability & Vital Heat

Combining the passionate urgency of red with the cheerful radiance of yellow, orange represents youthful spontaneity, playful confidence, and warmth. Highly effective in e-commerce, sports equipment, creative agencies, and casual culinary brands.

Psychology & Signals

Friendliness & WarmthYouthful EnthusiasmCreativity & PlayConfidence & Drive

Recommended Harmonious Pairings

Accessibility Tip:Deep oranges like Burnt Orange (#CC5500) provide excellent contrast on white, while bright oranges shine on dark mode cards.

Black 8.1:1 (AAA)

Tangerine

Juicy, vibrant citrus hue that invigorates modern web components.

Black 8.4:1 (AAA)

Coral

Warm maritime reef pink-orange radiating approachable charm.

Black 17.1:1 (AAA)

Peach

Soft velvety pastel orange ideal for gentle skincare and beauty surfaces.

Black 14.6:1 (AAA)

Apricot

Subtle orchard fruit tone blending warmth with quiet elegance.

White 4.3:1 (AA Large)

Burnt Orange

Deep autumnal embers tone with rugged authenticity and high legibility.

Black 6.2:1 (AA)

Ochre

Prehistoric natural earth pigment celebrating timeless pottery and clay.

Black 6.8:1 (AA)

Terracotta

Sun-baked Mediterranean ceramic clay tone trending in architectural UI.

White 5.6:1 (AA)

Rust

Iron oxide weathered warmth anchoring modern industrial colorways.

Black 8.2:1 (AAA)

Amber Orange

Luminous honeyed resin tone with intense glow and presence.

White 3.5:1 (AA Large)

Persimmon

Exotic winter fruit tone balancing red passion with citrus vigor.

Black 7.8:1 (AAA)

Pumpkin

Festive autumn harvest tone signaling seasonal warmth and comfort.

Black 6.6:1 (AA)

Sunset

Atmospheric twilight glow bridging golden hour skies with digital vibrancy.

Black 12.0:1 (AAA)

Mango

Tropical fruit tone infusing sunny sweetness into playful branding.

Black 8.4:1 (AAA)

Salmon

Delicate marine protein tone favored for sophisticated lifestyle palettes.

Black 7.2:1 (AAA)

Safety Orange

High-consequence visibility tone engineered for alerts and industrial focus.

White 8.6:1 (AAA)

Sienna

Tuscan earthen pigment steeped in Renaissance drawing history.

Swatch	Name	HEX Code	RGB Values	HSL Values	OKLCH	Lightness & Lum	WCAG Contrast	Actions
						L: 47%(0.357)	Black 8.1:1 (AAA)
						L: 66%(0.37)	Black 8.4:1 (AAA)
						L: 85%(0.806)	Black 17.1:1 (AAA)
						L: 84%(0.678)	Black 14.6:1 (AAA)
						L: 40%(0.193)	White 4.3:1 (AA Large)
						L: 47%(0.261)	Black 6.2:1 (AA)
						L: 62%(0.29)	Black 6.8:1 (AA)
						L: 39%(0.139)	White 5.6:1 (AA)
						L: 50%(0.362)	Black 8.2:1 (AAA)
						L: 46%(0.248)	White 3.5:1 (AA Large)
						L: 55%(0.34)	Black 7.8:1 (AAA)
						L: 61%(0.281)	Black 6.6:1 (AA)
						L: 61%(0.552)	Black 12.0:1 (AAA)
						L: 71%(0.37)	Black 8.4:1 (AAA)
						L: 50%(0.31)	Black 7.2:1 (AAA)
						L: 31%(0.072)	White 8.6:1 (AAA)

Shades of Purple

16 Shadescool Tone

Royalty, Luxury, Mysticism & Innovative Imagination

Historically the rarest and most expensive dye in human history, purple retains its cultural aura of imperial elegance, esoteric mystery, and high craft. In contemporary digital culture, purple is the signature hue of artificial intelligence, creative software, and premium luxury brands.

Psychology & Signals

Nobility & LuxuryMysticism & IntuitionImagination & AI InnovationSophistication & Depth

Recommended Harmonious Pairings

Accessibility Tip:Dark purples like Indigo (#4B0082) and Aubergine (#3D0735) achieve 10:1+ contrast against white, guaranteeing effortless AAA readability.

White 4.1:1 (AA Large)

Amethyst

Mystical violet crystal tone symbolizing meditative calm and balance.

White 5.8:1 (AA)

Violet

Spectral violet of the highest optical frequency, intense and electric.

White 13.0:1 (AAA)

Indigo

Profound deep blue-violet tone of ancient plant dyes and evening twilights.

Black 17.1:1 (AAA)

Lavender

Soft floral pale violet famous for soothing wellness and relaxation.

White 6.3:1 (AA)

Plum

Rich orchard fruit violet-red balancing warmth with dignified restraint.

Black 11.8:1 (AAA)

Mauve

The original 1856 synthetic aniline dye that revolutionized fashion history.

Black 6.7:1 (AA)

Magenta

Extra-spectral electric violet-pink with unmatched digital pop.

White 16.4:1 (AAA)

Aubergine

Midnight eggplant tone offering editorial luxury and moody depth.

White 9.6:1 (AAA)

Byzantium

Imperial Greco-Roman majesty evoking palace mosaics and velvet gowns.

Black 9.5:1 (AAA)

Lilac

Fragrant spring bloom pastel radiating gentle romance and nostalgia.

Black 9.5:1 (AAA)

Wisteria

Cascading vine floral pale purple beloved in Japanese garden arts.

Black 7.3:1 (AAA)

Orchid

Exotic tropical flower tone balancing vivid beauty with refinement.

White 12.8:1 (AAA)

Tyrian Purple

The legendary Phoenician murex shell dye reserved exclusively for Roman emperors.

White 4.4:1 (AA Large)

Mulberry

Dark berry stain tone blending wine richness with floral vitality.

Black 13.6:1 (AAA)

Periwinkle

Playful pastel bridge between dreamy cornflower blue and soft violet.

White 8.9:1 (AAA)

Eggplant

Subtle culinary dark purple with comforting warmth and high contrast.

Swatch	Name	HEX Code	RGB Values	HSL Values	OKLCH	Lightness & Lum	WCAG Contrast	Actions
						L: 60%(0.206)	White 4.1:1 (AA Large)
						L: 50%(0.131)	White 5.8:1 (AA)
						L: 25%(0.031)	White 13.0:1 (AAA)
						L: 94%(0.803)	Black 17.1:1 (AAA)
						L: 41%(0.117)	White 6.3:1 (AA)
						L: 85%(0.541)	Black 11.8:1 (AAA)
						L: 50%(0.285)	Black 6.7:1 (AA)
						L: 13%(0.014)	White 16.4:1 (AAA)
						L: 30%(0.059)	White 9.6:1 (AAA)
						L: 71%(0.423)	Black 9.5:1 (AAA)
						L: 75%(0.427)	Black 9.5:1 (AAA)
						L: 65%(0.313)	Black 7.3:1 (AAA)
						L: 20%(0.032)	White 12.8:1 (AAA)
						L: 53%(0.188)	White 4.4:1 (AA Large)
						L: 90%(0.632)	Black 13.6:1 (AAA)
						L: 32%(0.068)	White 8.9:1 (AAA)

Shades of Pink

16 Shadeswarm Tone

Tenderness, Playful Charm, Modern Care & High Fashion

Ranging from delicate blush pastels to unapologetic neon fuchsias, pink communicates empathy, approachable warmth, and vanguard design flair. A staple in cosmetics, youthful e-commerce, lifestyle products, and avant-garde editorial publications.

Psychology & Signals

Compassion & SweetnessPlayful EnergyCharm & WarmthYouth & Modern Fashion

Recommended Harmonious Pairings

Accessibility Tip:Deep pinks like Rose (#FF007F) perform superbly as accent buttons when paired with dark charcoal text or pure black wrappers.

White 3.8:1 (AA Large)

Rose

The classical symbol of floral passion and vibrant petal elegance.

White 3.6:1 (AA Large)

Deep Pink

High-octane, saturated digital pink commanding instant focus.

Black 7.9:1 (AAA)

Hot Pink

Iconic pop-culture pink radiating retro 80s glam and joyful optimism.

Black 6.0:1 (AA)

Blush

Subtle cosmetic rouge tone evoking modesty, warmth, and gentleness.

Black 11.5:1 (AAA)

Carnation

Sweet botanical floral pink with comforting, friendly innocence.

Black 7.6:1 (AAA)

Watermelon

Refreshing summer fruit tone bridging coral warmth with sweet pink pop.

Black 9.6:1 (AAA)

Flamingo

Tropical avian pink injecting exotic playfulness into modern layouts.

Black 13.8:1 (AAA)

Bubblegum

Nostalgic confectionary pastel pink beloved in confectionery and toys.

White 3.9:1 (AA Large)

Hollywood Cerise

Iconic, dazzling hot magenta-pink favored in high-fashion couture and neon accents.

Black 8.5:1 (AAA)

Coral Pink

Subtle oceanic reef pink warming up interface card components.

Black 10.5:1 (AAA)

Dusty Rose

Muted vintage botanical tone trending in bridal and interior palettes.

Black 13.3:1 (AAA)

Millennial Pink

The defining neutral-pink design movement tone of the late 2010s.

White 4.7:1 (AA)

Raspberry

Decadent bramble fruit stain tone balancing tartness with deep elegance.

White 4.4:1 (AA Large)

Cerise

French for cherry, a sophisticated deep red-pink with timeless grace.

White 4.4:1 (AA Large)

Amaranth

Mythological unfading flower tone celebrating immortal vibrancy.

Black 9.8:1 (AAA)

Salmon Pink

Warm peachy-pink providing a welcoming, soft surface presence.

Swatch	Name	HEX Code	RGB Values	HSL Values	OKLCH	Lightness & Lum	WCAG Contrast	Actions
						L: 50%(0.228)	White 3.8:1 (AA Large)
						L: 54%(0.239)	White 3.6:1 (AA Large)
						L: 71%(0.347)	Black 7.9:1 (AAA)
						L: 62%(0.25)	Black 6.0:1 (AA)
						L: 83%(0.527)	Black 11.5:1 (AAA)
						L: 71%(0.331)	Black 7.6:1 (AAA)
						L: 77%(0.43)	Black 9.6:1 (AAA)
						L: 88%(0.638)	Black 13.8:1 (AAA)
						L: 48%(0.218)	White 3.9:1 (AA Large)
						L: 72%(0.376)	Black 8.5:1 (AAA)
						L: 73%(0.477)	Black 10.5:1 (AAA)
						L: 85%(0.613)	Black 13.3:1 (AAA)
						L: 47%(0.174)	White 4.7:1 (AA)
						L: 53%(0.186)	White 4.4:1 (AA Large)
						L: 53%(0.19)	White 4.4:1 (AA Large)
						L: 78%(0.442)	Black 9.8:1 (AAA)

Shades of Gray & Neutral

16 Shadesneutral Tone

Balance, Modernism, Typographical Hierarchy & Precision

Grays and neutral tones form the invisible architectural foundation of world-class digital applications. From crisp cool zinc and deep charcoal to warm slate and soft stone, neutrals establish legible typographic hierarchies, subtle borders, and harmonious surfaces that allow content to shine.

Psychology & Signals

Modernism & EleganceNeutrality & FocusTimeless PrecisionRestraint & Utility

Recommended Harmonious Pairings

Accessibility Tip:Body text should never be lighter than Slate (#708090) or Charcoal (#36454F) to ensure strict compliance with WCAG 4.5:1 standards.

White 4.1:1 (AA Large)

Slate

Cool metamorphic rock gray with gentle blue undertones.

White 9.9:1 (AAA)

Charcoal

Burnt wood dark gray providing a softer, warmer alternative to pure black.

Black 11.5:1 (AAA)

Silver

Precious metal sheen tone embodying polished industrial cleanliness.

Black 10.9:1 (AAA)

Ash

Volcanic mineral residue gray with soft, calming neutrality.

White 12.8:1 (AAA)

Gunmetal

Heavy alloy dark gray with masculine, high-tech industrial edge.

White 10.0:1 (AAA)

Graphite

Crystalline carbon tone of fine sketching pencils and architectural drafts.

Black 6.8:1 (AA)

Pewter

Traditional tin alloy gray with muted heritage charm.

Black 15.3:1 (AAA)

Gainsboro

Classic CSS named light gray ideal for subtle panel background tints.

Black 16.5:1 (AAA)

Platinum

Rare noble metal white-gray conveying discreet high-end luxury.

Black 8.3:1 (AAA)

Cool Gray

Engineered digital interface utility tone for icons and placeholder text.

White 4.8:1 (AA)

Zinc

Modern design system neutral favored by Tailwind and Next.js.

White 4.1:1 (AA Large)

Smoke

Atmospheric misty gray with delicate forest undertones.

Black 14.7:1 (AAA)

Timberwolf

Natural wolf pelt gray blending warmth with stone elegance.

White 5.5:1 (AA)

Dim Gray

Standard medium-dark neutral offering reliable contrast on light surfaces.

White 4.4:1 (AA Large)

Steel Gray

Authentic, cool-toned industrial steel gray offering true neutral grounding.

White 3.8:1 (AA Large)

Battleship Gray

Naval camouflage medium gray symbolizing resilience and steadfastness.

Swatch	Name	HEX Code	RGB Values	HSL Values	OKLCH	Lightness & Lum	WCAG Contrast	Actions
						L: 50%(0.209)	White 4.1:1 (AA Large)
						L: 26%(0.056)	White 9.9:1 (AAA)
						L: 75%(0.527)	Black 11.5:1 (AAA)
						L: 72%(0.496)	Black 10.9:1 (AAA)
						L: 19%(0.032)	White 12.8:1 (AAA)
						L: 28%(0.055)	White 10.0:1 (AAA)
						L: 57%(0.288)	Black 6.8:1 (AA)
						L: 86%(0.716)	Black 15.3:1 (AAA)
						L: 89%(0.776)	Black 16.5:1 (AAA)
						L: 65%(0.364)	Black 8.3:1 (AAA)
						L: 46%(0.167)	White 4.8:1 (AA)
						L: 48%(0.209)	White 4.1:1 (AA Large)
						L: 84%(0.683)	Black 14.7:1 (AAA)
						L: 41%(0.141)	White 5.5:1 (AA)
						L: 47%(0.187)	White 4.4:1 (AA Large)
						L: 51%(0.23)	White 3.8:1 (AA Large)

Shades of Brown

16 Shadesneutral Tone

Earthiness, Artisanal Heritage, Comfort & Stability

Rooted in the fertile soils, ancient woods, and roasted botanicals of the earth, brown evokes grounded authenticity, artisanal dedication, and warm comfort. Perfect for coffee roasters, craft bakeries, leather goods, architectural timber, and heritage outdoor apparel.

Psychology & Signals

Artisanal CraftWarmth & SecurityGrounded HeritageComfort & Endurance

Recommended Harmonious Pairings

Accessibility Tip:Dark coffee and chocolate tones achieve 9:1+ contrast on cream backgrounds, creating readable, cozy editorial typography.

White 6.6:1 (AA)

Chestnut

Warm nutty reddish-brown of forest deciduous trees.

White 8.2:1 (AAA)

Chocolate

Decadent roasted cocoa bean brown evoking rich culinary comfort.

White 7.4:1 (AAA)

Coffee

Rich espresso roast tone beloved by cafe branding and modern lifestyle.

Black 7.3:1 (AAA)

Caramel

Golden confectionary brown blending sweetness with artisanal warmth.

White 5.3:1 (AA)

Mahogany

Precious tropical hardwood reddish-brown symbolizing heirloom craftsmanship.

White 8.5:1 (AAA)

Sepia

Cuttlefish ink tone celebrated in early vintage photography and prints.

White 11.7:1 (AAA)

Espresso

Ultra-concentrated dark roast tone providing punchy, grounded contrast.

White 7.5:1 (AAA)

Umber

Natural earth pigment rich in manganese oxide from ancient Umbria.

Black 6.7:1 (AA)

Bronze

Historic copper-tin alloy tone symbolizing antiquity and Olympic triumph.

Black 7.1:1 (AAA)

Burnt Sienna

Calcined Tuscan iron earth pigment celebrated in Renaissance fresco.

Black 9.9:1 (AAA)

Khaki

Dust-colored utility cotton tone of military uniforms and casual tailoring.

White 4.5:1 (AA Large)

Mocha

Charming blend of rich coffee beans and chocolate syrup.

White 6.3:1 (AA)

Cognac

Aged French brandy tone radiating refined evening warmth and oak casks.

Black 8.1:1 (AAA)

Camel

Sophisticated desert mammalian fleece tone of timeless winter trenchcoats.

Black 10.6:1 (AAA)

Tan

Oak-bark leather tanning tone with friendly neutral approachability.

White 10.7:1 (AAA)

Taupe

French for mole, a sophisticated gray-brown staple in minimalist fashion.

Swatch	Name	HEX Code	RGB Values	HSL Values	OKLCH	Lightness & Lum	WCAG Contrast	Actions
						L: 40%(0.109)	White 6.6:1 (AA)
						L: 24%(0.078)	White 8.2:1 (AAA)
						L: 33%(0.091)	White 7.4:1 (AAA)
						L: 43%(0.314)	Black 7.3:1 (AAA)
						L: 38%(0.149)	White 5.3:1 (AA)
						L: 26%(0.074)	White 8.5:1 (AAA)
						L: 24%(0.04)	White 11.7:1 (AAA)
						L: 33%(0.09)	White 7.5:1 (AAA)
						L: 50%(0.284)	Black 6.7:1 (AA)
						L: 62%(0.304)	Black 7.1:1 (AAA)
						L: 67%(0.447)	Black 9.9:1 (AAA)
						L: 34%(0.184)	White 4.5:1 (AA Large)
						L: 42%(0.116)	White 6.3:1 (AA)
						L: 59%(0.355)	Black 8.1:1 (AAA)
						L: 69%(0.482)	Black 10.6:1 (AAA)
						L: 24%(0.048)	White 10.7:1 (AAA)

Shades of Black

12 Shadesneutral Tone

Elegance, Executive Authority, Minimalism & Prestige

Black embodies absolute luxury, sharp editorial authority, and modern minimalism. It provides the definitive contrast canvas for high-end design systems, editorial layouts, and dark mode digital applications.

Psychology & Signals

Prestige & LuxuryExecutive AuthorityMinimalism & EdgeInfinite Depth & Elegance

Recommended Harmonious Pairings

Accessibility Tip:Black against pure white yields the absolute maximum possible contrast ratio (21:1), guaranteeing uncompromised accessibility.

White 21.0:1 (AAA)

True Black

The total absence of reflected visible light; the absolute digital black (#000).

White 19.8:1 (AAA)

Jet Black

Polished fossilized gemstone black with subtle specular sheen.

White 11.8:1 (AAA)

Onyx

Banded chalcedony mineral dark tone offering gentle, sophisticated depth.

White 17.2:1 (AAA)

Obsidian

Volcanic glass black with razor-sharp reflection and modern edge.

White 17.2:1 (AAA)

Eerie Black

Cinema and screen dark gray-black engineered to prevent eye fatigue.

White 18.8:1 (AAA)

Midnight

The official Material Design baseline dark surface tone for OLED panels.

White 15.9:1 (AAA)

Charcoal Black

Softened carbon tone favored for readable digital body text and navigation.

White 18.4:1 (AAA)

Licorice

Warm sweet confectionery black with very subtle reddish-brown soul.

White 14.8:1 (AAA)

Matte Black

Non-reflective satin automotive black favored by tech gadgets.

White 20.6:1 (AAA)

Raven

Glossy corvid feather black with imperceptible midnight-blue shimmer.

White 20.6:1 (AAA)

Vantablack Hue

Engineered nanotube super-black absorbing virtually all incoming rays.

White 20.6:1 (AAA)

Pitch Black

Deep tar and bitumen nocturnal black of moonless country nights.

Swatch	Name	HEX Code	RGB Values	HSL Values	OKLCH	Lightness & Lum	WCAG Contrast	Actions
						L: 0%(0)	White 21.0:1 (AAA)
						L: 4%(0.003)	White 19.8:1 (AAA)
						L: 22%(0.039)	White 11.8:1 (AAA)
						L: 11%(0.011)	White 17.2:1 (AAA)
						L: 11%(0.011)	White 17.2:1 (AAA)
						L: 7%(0.006)	White 18.8:1 (AAA)
						L: 13%(0.016)	White 15.9:1 (AAA)
						L: 8%(0.007)	White 18.4:1 (AAA)
						L: 16%(0.021)	White 14.8:1 (AAA)
						L: 3%(0.001)	White 20.6:1 (AAA)
						L: 1%(0.001)	White 20.6:1 (AAA)
						L: 1%(0.001)	White 20.6:1 (AAA)

Shades of White

12 Shadesneutral Tone

Purity, Breathable Space, Clarity & Light

White represents cleanliness, limitless breathability, and pure intellectual focus. It serves as the primary canvas for digital readability, giving typography space to breathe and allowing vibrant accent palettes to command attention without visual fatigue.

Psychology & Signals

Clarity & FocusPurity & InnocenceAiriness & MinimalismOpen Possibility & Calm

Recommended Harmonious Pairings

Accessibility Tip:Pairing white backgrounds with dark elements (#111827) provides 16:1+ contrast, ideal for reading long-form technical content.

Black 21.0:1 (AAA)

Pure White

The optical sum of all spectral colors; the standard digital canvas (#FFF).

Black 20.3:1 (AAA)

Snow

Delicate floral white with microscopic warm pink undertone.

Black 20.8:1 (AAA)

Ivory

Precious elephant tusk tone offering gentle yellow warmth and dignity.

Black 17.4:1 (AAA)

Eggshell

Subtle avian shell tone offering a gentle matte alternative to stark white.

Black 17.4:1 (AAA)

Alabaster

Smooth gypsum mineral white celebrated in ancient Egyptian sculpture.

Black 19.9:1 (AAA)

Ghost White

Cool ethereal white with faint lilac-blue reflection for tech surfaces.

Black 18.7:1 (AAA)

Linen

Woven flax fabric white bringing organic warmth and tactile coziness.

Black 19.4:1 (AAA)

Bone White

Natural organic ivory tone providing timeless architectural composure.

Black 19.5:1 (AAA)

Seashell

Maritime conch shell white with delicate warm blush highlights.

Black 16.6:1 (AAA)

Vanilla

Creamy orchid seedpod white offering delectable confectionery warmth.

Black 20.3:1 (AAA)

Cream White

Rich dairy white engineered to eliminate stark light-mode eye strain.

Black 19.3:1 (AAA)

Parchment

Historical vellum manuscript tone evoking classical libraries and letters.

Swatch	Name	HEX Code	RGB Values	HSL Values	OKLCH	Lightness & Lum	WCAG Contrast	Actions
						L: 100%(1)	Black 21.0:1 (AAA)
						L: 99%(0.965)	Black 20.3:1 (AAA)
						L: 97%(0.991)	Black 20.8:1 (AAA)
						L: 89%(0.822)	Black 17.4:1 (AAA)
						L: 90%(0.822)	Black 17.4:1 (AAA)
						L: 99%(0.943)	Black 19.9:1 (AAA)
						L: 94%(0.884)	Black 18.7:1 (AAA)
						L: 95%(0.922)	Black 19.4:1 (AAA)
						L: 97%(0.927)	Black 19.5:1 (AAA)
						L: 81%(0.78)	Black 16.6:1 (AAA)
						L: 98%(0.966)	Black 20.3:1 (AAA)
						L: 94%(0.917)	Black 19.3:1 (AAA)

Curated Color Directory · WCAG 2.2 Contrast & Brand Psychology

The Complete Color Shades Directory: Spectrum Families, Design Psychology & Accessible Palettes

Real Colour Picker is an interactive curated color directory with wcag contrast ratios online across 11 spectrum families. Designers frequently ask: what is color psychology and how does color psychology in design guide digital trust?

Color psychology evaluates how visual wavelengths drive emotional response. Whether testing color theory red combinations, exploring a calm shades of green color palette, or researching trust colors psychology, our studio delivers instant precision. Rather than seeking a desktop color contrast analyzer download or standalone Colour Contrast Analyser (CCA), our platform pairs a live color contrast checker, dynamic color contrast generator, and color contrast suggestions in-browser. Check color contrast WCAG ratings, copy certified tokens, and master digital color.

Shades of Blue & Green: Psychology, Hex Codes & Calming Palettes

Blue and green are the digital industry's most dependable spectrum families. Designers frequently inquire: how many shades of blue are there? While sRGB spans millions of subtle gradations, practical design systems focus on curated collections like our 100 shades of blue or an accessible index of 50 shades of blue color names and 50 shades of blue color code values.

Exploring cool spectrum nuances across UI themes:

All Shades of Blue: Browse different shades of blue, shades of blue names, and certified shades of blue hex codes. From airy sky blue shades and shades of light blue to common shades of blue like cobalt and navy, curating a shades of blue color palette draws upon blue color psychology to foster stability and user safety.
Shades of Green & Blue-Green: Harmonizing water and foliage, shades of blue green flow naturally into shades of green blue and pure shades of green. Inspect all shades of green, different shades of green, shades of green color, and dark shades of green such as jade and forest.
Codes & Psychology: Look up shades of green names, green shades names, the precise green color code, green shades hex code, and standard green color code in HTML. Using our interactive green color picker, creators evaluate green colour association with balance and growth (green color psychology meaning, green color psychology, and color psychology green) to build versatile green color palette combinations across varied green color shades.

Shades of Red & Orange: High-Conversion Marketing & Action Psychology

Warm wavelengths stimulate optical focus and trigger decisive behavior. In product design, red in marketing acts as a primary driver for prominent calls-to-action, sale badges, and urgent validation alerts.

Harnessing warm energy across user journeys:

All Shades of Red: Discover different shades of red, shades of red names, and velvety dark shades of red such as crimson, ruby, and wine. Our directory condenses comprehensive 100 shades of red charts into production-ready digital tokens for any shades of red color implementation.
Red Symbolism & Emotion: In behavioral studies, red colour meaning in life and red color meaning personality signal strength, vitality, and passionate urgency. Applying red color theory psychology and balanced color theory red combinations empowers teams to build a bold red branding color palette. Understanding the meaning of colors in business logos ensures red reinforces corporate presence without fatigue.
Dynamic Shades of Orange: Extending energetic warmth, shades of orange radiate enthusiasm. Explore different shades of orange, all shades of orange, shades of orange color, shades of orange names, and certified shades of orange hex codes. Blend lively shades of orange red into a harmonious shades of orange color palette for contemporary applications.

Shades of Purple & Yellow: Luxury, Optimism & Spectral Balance

Exploring different shades of purple unites historical prestige with modern digital innovation. In UI design, purple communicates creative ambition, luxury, and visionary thinking across SaaS and AI platforms.

Balancing high chroma and luminance across interfaces:

All Shades of Purple: Creators asking how many shades of purple are there will discover our library encompasses gentle light shades of purple, lavender shades of purple paint, and authoritative dark shades of purple like plum and violet. Each swatch details verified shades of purple names and shades of purple hex codes for every shades of purple color implementation.
All Shades of Yellow: Occupying the highest point of spectral luminance, shades of yellow symbolize clarity and cheerfulness. Browse different shades of yellow, shades of yellow names, and certified shades of yellow hex codes for rich shades of yellow color applications.
Tonal Range & Contrast: From sunny pastels and architectural paint shades of yellow to zesty shades of yellow green, our library organizes references comparable to 100 shades of yellow charts. Because pure yellow features high intrinsic brightness, our directory automatically recommends dark text tokens to safeguard readability.

Corporate Brand Color Psychology: Trust, Reliability & Logo Design

Visual identity forms an enduring bridge between products and their audience. An interactive brand color psychology chart reveals how intentional hue selection builds instinctive credibility within milliseconds of first interaction.

Principles of strategic brand architecture:

Trust & Reliability Archetypes: Reviewing a corporate brand color psychology trust and reliability example shows why financial institutions and enterprise cloud providers anchor their identity in deep navy and slate to project steadfast security.
Branding Psychology in Practice: Studying branding color psychology and the psychology of color and its effect on branding equips design teams to align palettes with corporate values. Rather than relying on static corporate brand color psychology trust and reliability pdf files, printed color psychology in branding PDF sheets, or offline color psychology in logo design PDF summaries, developers test responsive palette dynamics live in our directory.

Accessible Design: WCAG Contrast Ratios, Suggestions & Reading Background Whites

Aesthetic harmony must be anchored in digital accessibility. As an online curated color directory with wcag contrast ratios online, Real Colour Picker calculates the color contrast ratio using the W3C relative luminance formula: (L1 + 0.05) / (L2 + 0.05).

Real-Time In-Browser Accessibility Testing

Engineers no longer need a cumbersome desktop color contrast analyzer download or a separate Colour Contrast Analyser (CCA) application. Our browser studio includes an integrated color contrast checker and color contrast generator that validates color contrast WCAG 2.2 Level AA (4.5:1) and AAA (7.0:1) requirements on the fly.

When a combination fails standard thresholds, our engine serves instant color contrast suggestions that adjust lightness while preserving base hue.

Best Background Shades of White for Reading Apps

Accessibility considerations extend directly to reading surfaces. While a white background plain (#FFFFFF) or basic plain white background for editing is standard, pure white can cause glare and ocular fatigue during prolonged reading.

Our directory curates the best background shades of white for reading apps free—including alabaster (#F9F9FB), ivory (#FFFFF0), and ghost white (#F8F9FA). These softened canvases reduce eye strain while maintaining certified contrast compliance for dark typography.

Color Theory, WCAG Accessibility & Figma Design Tokens

Frequently Asked Questions

Comprehensive answers on WCAG contrast standards, accessible color combinations, yellow text legibility, color codes, color schemes, and exporting Figma design tokens to code.

14 Answers

Is yellow text on a white background accessible?

No, pure yellow text on a white background is fundamentally inaccessible and dramatically fails digital accessibility standards.

The Contrast Ratio Math: In the sRGB color space, pure yellow (#FFFF00) features an exceptionally high relative luminance of 0.927, while pure white (#FFFFFF) has a relative luminance of 1.000. Evaluated under the standard W3C formula (L1 + 0.05) / (L2 + 0.05), pure yellow against white delivers an abysmal contrast ratio of just 1.07:1.
WCAG 2.2 Threshold Failure: This falls drastically below the minimum 4.5:1 required for normal body text and 3.0:1 for large text under WCAG 2.2 Level AA (SC 1.4.3), as well as the 7.0:1 required for Level AAA (SC 1.4.6). It is practically illegible for readers with normal vision and completely invisible to individuals with low vision, aging eyes, or color vision deficiencies.
How to Make Yellow Accessible:
- Invert the polarity: Place dark text (such as deep charcoal #111111 or navy #0F172A) on a vibrant yellow container or button (e.g. #111111 on #FACC15 yields a robust 11.5:1 ratio).
- Darken to Ochre / Mustard: If text must remain in the yellow family on a white background, darken it to a deep golden-brown ochre such as #73510D (achieves 4.5:1 for normal text) or #8D6500 (achieves 3.1:1 for bold/large headers).
- Use a Dark Pill Container: Wrap yellow text (#FDE047) inside a dark slate badge (#0F172A) to create a passing 12.8:1 contrast ratio.

What are the color contrast guidelines for WCAG accessibility standards?

WCAG (Web Content Accessibility Guidelines) color contrast quantifies the relative luminance ratio between foreground text (or graphical interface elements) and their adjacent background color. It guarantees readability across screen types, lighting environments, and visual abilities.

Under the international standard WCAG 2.2, the required minimum contrast guidelines are structured across two compliance levels:

Level AA (Minimum Standard for Legal & Commercial Compliance):
- Normal Body Text (< 18pt regular or < 14pt bold): Requires a minimum contrast ratio of 4.5:1 (Success Criterion 1.4.3).
- Large Text (≥ 18pt / 24px regular or ≥ 14pt / ~18.66px bold): Requires a minimum contrast ratio of 3.0:1 (Success Criterion 1.4.3).
- Non-Text UI Elements & Graphical Objects: Requires a minimum contrast ratio of 3.0:1 against adjacent colors for active user interface components (such as form field borders, button outlines, checkboxes, toggles) and standalone informative charts or icons (Success Criterion 1.4.11).
Level AAA (Enhanced Accessibility for High-Legibility & Specialized Platforms):
- Normal Body Text: Requires a minimum contrast ratio of 7.0:1 (Success Criterion 1.4.6).
- Large Text: Requires a minimum contrast ratio of 4.5:1.
Use of Color Rule (Success Criterion 1.4.1): Color must never be the sole visual cue to convey state, errors, success, or interactive focus. Always pair color shifts with visual underlines, textual badges, or icons.

Exceptions: Purely decorative graphical art, inactive (disabled) interface elements, and brand logotypes are explicitly exempt from contrast ratio minimums under WCAG 2.2.

Which color combination is best for accessibility and contrast?

While pure black on pure white (#000000 on #FFFFFF) delivers the maximum possible mathematical contrast ratio of 21.0:1, human-computer interaction (HCI) research shows that maximum contrast can produce visual glare and optical "halation" (a vibrating blur effect) for readers with astigmatism, dyslexia, or photophobia.

The ergonomic sweet spot for optimal accessibility falls between 12.0:1 and 16.0:1. The best high-performing color combinations include:

Deep Charcoal on Pure White / Warm White: Dark charcoal (#111111 or #1F2937) on white (#FFFFFF) achieves 16.1:1 contrast. It effortlessly passes WCAG AAA while eliminating harsh pixel vibration.
Midnight Navy on Crisp White / Alabaster: Deep navy (#0F172A or #0A2540) on white (#FFFFFF) yields 16.9:1 contrast, providing ultra-clean reading comfort and projecting institutional trust.
Deep Forest Green on Soft Sage / White: Deep pine (#064E3B) on white achieves 11.6:1, exceeding Level AAA standards.
Accessible Dark Mode (Soft White on Slate):** Off-white (#F8FAFC) on dark slate (#0F172A) achieves 16.2:1 contrast, preventing OLED burn-in and night-time eye fatigue.

04
What is the minimum contrast allowed by the WCAG AAA color standards?

Under WCAG 2.2 Level AAA (Success Criterion 1.4.6 Contrast (Enhanced)), the minimum allowed contrast ratios are:

Normal Body Text (< 18pt regular or < 14pt bold): Must achieve at least a 7.0:1 contrast ratio against the background.

Large Text (≥ 18pt / 24px regular or ≥ 14pt / ~18.66px bold): Must achieve at least a 4.5:1 contrast ratio against the background.

Why Level AAA Exists: The 7.0:1 threshold compensates for moderate-to-severe visual acuity loss (approximately 20/80 vision, common among seniors and individuals with uncorrected low vision), allowing them to read text without using third-party screen magnifiers.

Note: The W3C notes that Level AAA is not recommended as a blanket requirement across entire websites because rich photographic assets, diverse video streams, and complex branding palettes cannot always achieve 7.0:1 without drastic visual constraints. However, primary editorial copy, transaction receipts, and legal terms should strive for AAA compliance.

05
What is 100% yellow in RGB?

In the standard 24-bit sRGB color space, 100% yellow is formed by combining the Red and Green primary light channels at full intensity (100% / 255) with zero Blue light:

RGB (0–255 Integer Notation): rgb(255, 255, 0)

RGB (Percentage Notation): rgb(100%, 100%, 0%)

Hexadecimal (HEX): #FFFF00

HSL: hsl(60, 100%, 50%)

HSV / HSB: hsv(60°, 100%, 100%)

CMYK (Subtractive Print): cmyk(0%, 0%, 100%, 0%)

Named CSS Keyword: yellow

In additive optical color science, red photons (~700 nm) and green photons (~546 nm) stimulate the eye's Long (L) and Medium (M) cone photoreceptors simultaneously, which the human brain interprets as pure spectral yellow.

06
What colors are ADA-approved?

There are no specific colors that are officially "ADA-approved" or "ADA-banned."

The Americans with Disabilities Act (ADA Title III) does not maintain a directory or certificate of approved color swatches. Instead, federal compliance for digital websites and applications is governed by the Web Content Accessibility Guidelines (WCAG) Level AA, recognized by the US Department of Justice (DOJ) and federal courts.

Under the ADA and WCAG, whether a color is compliant depends entirely on its contrast relationship with adjacent surfaces and its functional usage:

Contrast Compliance: Any color is ADA-compliant as text if it achieves at least a 4.5:1 contrast ratio (or 3.0:1 for text 18pt+ or 14pt+ bold) against its background. For example, neon yellow is non-compliant on white (1.07:1), but fully ADA-compliant when used as an accent on dark charcoal (13.2:1).

Non-Text Contrast (SC 1.4.11): Form inputs, interactive borders, and icon graphics must maintain at least 3.0:1 contrast against adjacent backgrounds.

Independent Visual Indicators (SC 1.4.1): Colors cannot be the sole conveyor of information. Warning messages, active tabs, and validation errors must include text labels, icons, or patterns in addition to color changes.

07
What are color tokens?

Color tokens (design tokens) are platform-agnostic, semantic key-value pairs that store digital color decisions under meaningful names rather than hardcoded hex values.

In modern enterprise design systems, color tokens are structured across three hierarchical tiers:

1. Global / Primitive Tokens: Raw spectral color scales (e.g. --blue-500: #3b82f6, --gray-900: #111827).

2. Semantic / System Tokens: Named after functional intent or UI roles (e.g. --color-text-primary: var(--gray-900), --color-surface-card: var(--gray-50), --color-action-brand: var(--blue-500)).

3. Component Tokens: Scoped strictly to specific UI elements (e.g. --button-primary-bg: var(--color-action-brand)).

Core Benefits: Color tokens allow automated dark mode transitions (by remapping semantic variables under .dark), single-point brand updates, and effortless synchronization between Figma design libraries and production codebases across CSS, Tailwind v4, React, iOS, and Android.

08
How to make tokens in Figma?

To create color tokens in Figma, use Figma's native Variables system:

Open the Variables Modal: Deselect all canvas layers and click the Local variables icon (slider icon) in the right-hand design sidebar.

Create a Collection: Click the collection dropdown and create two collections: Primitives (for base colors) and Semantic (for functional UI aliases).

Define Variable Names with Slash Notation: Click Create variable → Color. Use forward slashes to automatically organize tokens into folders (e.g., text/primary, text/muted, surface/default, action/brand).

Alias Semantic Tokens: In your Semantic collection, right-click a color input, choose Create alias, and link it directly to a primitive token.

Add Variable Modes (Light / Dark): Click the + button at the top right of the table to add a second column titled "Dark". Map appropriate dark mode hex values to your semantic tokens.

Apply Tokens to Canvas Elements: Select any layer, click the 4-dot variable picker next to Fill or Stroke, and choose your semantic token. Changing modes on parent frames will dynamically update the entire UI.

09
How do I export a token from Figma?

You can export color tokens from Figma to engineering codebases using three industry-standard methods:

Method 1: Tokens Studio for Figma (Recommended): Install the popular Tokens Studio for Figma community plugin. It manages multi-tier token sets and exports your design tokens directly as standard JSON files or syncs automatically with GitHub, GitLab, or Azure DevOps repositories.

Method 2: W3C Design Tokens Community Plugins & Style Dictionary: Use community export plugins such as Design Tokens (W3C standard format) or Export Variables to CSS/JSON to produce a standard DTCG JSON file. Then run Amazon's Style Dictionary build tool to transform that JSON into CSS custom properties (:root { --color-brand: #3b82f6; }), Tailwind v4 @theme rules, Swift colors, or Android Jetpack Compose themes.

Method 3: Official Figma Variables REST API: On Figma Organization and Enterprise plans, your build pipeline can query the official REST API endpoint:
GET /v1/files/{file_key}/variables/local This returns all variable collections, modes, and values in structured JSON, enabling automated CI/CD token generation.

10
Can I convert Figma design to code?

Yes, Figma designs can be converted directly to code using several modern developer workflows:

Figma Dev Mode (Native Inspector): Click the green toggle in Figma's top right to enter Dev Mode. Selecting any frame or component reveals production-ready CSS, Swift (iOS), and Kotlin (Android). Dev Mode displays token variable aliases, box-model layouts, flexbox alignments, and allows one-click SVG/PNG asset exporting.

Automated Code Generation Plugins:

Builder.io (Figma to Code): Uses AI to generate responsive React, Vue, Svelte, or clean HTML/Tailwind components from Figma Auto Layout designs.

Anima for Figma: Converts designs into production-ready React or Vue code with responsive breakpoints, stateful inputs, and prototype interactions.

Locofy.ai: Transforms Figma layouts into functional frontend code with TypeScript, Tailwind CSS, and state management hooks.

Design System Component Matching: Modern teams map Figma design components directly to UI libraries (like Tailwind CSS, Radix UI, or shadcn/ui) via Figma Code Connect, ensuring code handoff produces identical, semantic frontend code.

11
How to generate color code?

You can generate digital color codes using several quick and reliable methods:

1. Browser Color Studio (Real Colour Picker): Use our interactive color directory, color wheel, or shade generator to pick any hue visually. The platform instantly generates synchronized HEX, RGB, HSL, HSV, and OKLCH codes ready for one-click clipboard copying.

2. Browser DevTools Eyedropper: In Google Chrome, Firefox, Safari, or Edge, press F12 to open DevTools, inspect any element containing a color rule, click the color preview swatch, and select the Eyedropper magnifying glass to sample any pixel on your monitor.

3. Sample Directly from Images: Paste any screenshot (Ctrl+V) or upload a photo into our Image Color Picker to generate codes with a 10× precision loupe.

4. Programmatically in JavaScript: Convert 8-bit RGB channels (0–255) to a 6-digit hex code using:
const hex = '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');

12
What are the 7 color codes?

In digital design and software development, "the 7 color codes" refers to the 7 primary digital color formats and models used by web browsers, operating systems, and graphics engines to render colors:

1. HEX (Hexadecimal):
Base-16 6/8-character code: #3B82F6 (or #3B82F6CC with alpha).

2. RGB / RGBA:
Additive red, green, blue integers: rgb(59, 130, 246).

3. HSL / HSLA:
Hue, Saturation, Lightness: hsl(217, 91%, 60%).

4. HSV / HSB:
Hue, Saturation, Value/Brightness: hsv(217, 76%, 96%).

5. CMYK:
Subtractive four-color print inks: cmyk(76%, 47%, 0%, 4%).

6. OKLCH / LCH:
Modern CSS Level 4 perceptual space: oklch(0.62 0.19 255).

7. Named CSS Keywords:
Standardized human-readable keyword: royalblue, crimson, etc. (148 total keywords).

Note on Physics: In classical optics, "the 7 color codes" can also refer to Sir Isaac Newton's visible spectrum rainbow acronym ROYGBIV (Red, Orange, Yellow, Green, Blue, Indigo, Violet).

13
What are the 7 major color schemes?

In digital design and fine art, color schemes (harmonies) are geometric relationships plotted across the 360° color wheel. The 7 major color schemes encompass the 5 foundational harmonies plus two extended multi-hue models:

1. Monochromatic (Core): Employs variations in lightness, tint, tone, and shade of a single base hue (e.g., Ice Blue, Royal Blue, Navy). Produces calm, highly unified, minimal interfaces with low cognitive friction.

2. Complementary (Core): Pairs two colors situated directly opposite each other on the 360° wheel (180° apart, e.g., Blue and Orange, Red and Green). Delivers maximum visual tension and high-impact conversion contrast for call-to-action buttons.

3. Analogous (Core): Combines three adjacent colors sitting next to each other on the wheel (e.g., Yellow, Yellow-Green, and Green). Abundant in nature, producing tranquil and comfortable digital compositions.

4. Triadic (Core): Uses three colors spaced evenly at 120° intervals around the wheel (e.g., Red, Yellow, Blue or Purple, Green, Orange). Delivers vibrant balance even with muted saturation.

5. Split-Complementary (Core): Uses a base hue paired with the two colors adjacent to its direct complement (e.g., Blue paired with Yellow-Orange and Red-Orange). Provides strong contrast with softer optical tension than a direct complementary pair.

6. Tetradic / Rectangle (Extended): Combines two distinct complementary pairs (4 colors total) forming a rectangle on the wheel. Highly rich and versatile; best applied when one hue dominates while the others serve as subtle accents.

7. Square (Extended): Four colors spaced equidistant at 90° intervals around the color wheel. Delivers a vibrant, dynamic balance of warm and cool temperatures.

The Five Main Color Schemes: Traditional art instruction frequently focuses on the five main schemes (schemes 1 through 5 above), which form the structural core of visual palette design.

14
What are some examples of accessible color schemes?

Accessible color schemes pair harmonious aesthetics with mathematically proven WCAG 2.2 AA and AAA contrast compliance. Here are four production-ready, battle-tested palette combinations with verified contrast ratios:

1. Executive Navy & Crisp Alabaster (Enterprise SaaS & Finance) WCAG AAA (16.9:1)

Background: Off-White Alabaster (#F8FAFC) • Body Text: Midnight Navy (#0F172A, 16.9:1) • Primary CTA: Royal Blue (#1D4ED8, 7.3:1) • Secondary Text: Slate (#475569, 5.8:1).

2. Deep Forest Pine & Mint White (Wellness, Clean Tech & Editorial) WCAG AAA (11.6:1)

Background: Clean White (#FFFFFF) • Body Text: Deep Pine (#064E3B, 11.6:1) • Interactive Accent: Emerald (#047857, 4.6:1) • Card Surface: Mint Sage (#F0FDF4).

3. Charcoal & Warm Amber (Creative Studio & Commerce) WCAG AAA (14.8:1)

Background: Warm Cream (#FFFBEB) • Body Text: Espresso Charcoal (#1F2937, 14.8:1) • Accent Button: Deep Ochre (#92400E, 6.2:1) • Badge: Golden Amber (#F59E0B with dark text).

4. Modern Dark Mode (Developer Dashboards & SaaS Tools) WCAG AAA (17.5:1)

Background: Dark Charcoal (#090A0F) • Body Text: Pure Ice White (#F8FAFC, 17.5:1) • Accent Cyan: Electric Sky (#38BDF8, 11.2:1) • Muted Metadata: Slate Gray (#94A3B8, 7.4:1).

Explore 1,000+ Curated Color Shades & WCAG Contrast Ratios

Browse 11 spectrum families, inspect real-time luminance, and export certified design tokens.

Back to Top↑

Color Library & Shade Directory

Color Spectrum & Chart

Shades of Red

Shades of Blue

Shades of Green

Shades of Yellow

Shades of Orange

Shades of Purple

Shades of Pink

Shades of Gray & Neutral

Shades of Brown

Shades of Black

Shades of White

No Matching Shades Found

The Complete Color Shades Directory: Spectrum Families, Design Psychology & Accessible Palettes

Shades of Blue & Green: Psychology, Hex Codes & Calming Palettes

Shades of Red & Orange: High-Conversion Marketing & Action Psychology

Shades of Purple & Yellow: Luxury, Optimism & Spectral Balance

Corporate Brand Color Psychology: Trust, Reliability & Logo Design

Accessible Design: WCAG Contrast Ratios, Suggestions & Reading Background Whites

Real-Time In-Browser Accessibility Testing

Best Background Shades of White for Reading Apps

Frequently Asked Questions

Is yellow text on a white background accessible?

What are the color contrast guidelines for WCAG accessibility standards?

Which color combination is best for accessibility and contrast?

What is the minimum contrast allowed by the WCAG AAA color standards?

What is 100% yellow in RGB?

What colors are ADA-approved?

What are color tokens?

How to make tokens in Figma?

How do I export a token from Figma?

Can I convert Figma design to code?

How to generate color code?

What are the 7 color codes?

What are the 7 major color schemes?

What are some examples of accessible color schemes?

Explore 1,000+ Curated Color Shades & WCAG Contrast Ratios