# HexColor Pro — full site content > Free, client-side color tools for designers and developers. Every page below is public, requires no signup, and is served as static HTML. Generated from the site source. Source: https://hexcolorpro.pages.dev · Sitemap: https://hexcolorpro.pages.dev/sitemap.xml · Pages: 187 --- ## HexColor Pro - Free Color Picker, Palette Generator & Color Tools URL: https://hexcolorpro.pages.dev/ #### All Color Tools Everything you need to work with colors — all in one place 🎨 ##### Color Picker Pick any color and instantly get HEX, RGB, HSL, HSV, and CMYK values. Save your favorites. 🌈 ##### Gradient Generator Create beautiful CSS gradients with multiple color stops. Linear, radial, and conic gradients. ✅ ##### Contrast Checker Check WCAG accessibility compliance. Ensure your text is readable against any background. 🎯 ##### Palette Generator Generate harmonious color palettes from one color. Analogous, complementary, triadic, and more. 🔍 ##### Color Name Finder Find the closest named color for any hex code. Over 1,500 color names in our database. 🔄 ##### Color Converter Convert between HEX, RGB, HSL, HSV, CMYK, and more. Bulk conversion supported. 🌗 ##### Color Shades Generator Generate tints and shades from any color. Perfect for design systems and UI palettes. 🎲 ##### Random Color Generator Generate random colors, palettes, and gradients. Great for inspiration and brainstorming. 🎨 ##### Color Mixer Mix two colors together with adjustable ratio. Find the perfect middle ground. 📝 ##### Text Color Generator Automatically pick the best text color for any background. WCAG-compliant results. 🌡️ ##### Color Temperature Calculate color temperature from any hex code or convert Kelvin to RGB instantly. #### Learn & Explore Tips, guides, and inspiration for working with color Accessibility ##### Accessible Color Palettes for Healthcare & Government Websites How to build WCAG-compliant color systems for healthcare, government, and public services where accessibility is the law. 10 min read · Accessibility Design Systems ##### Best Color Palettes for SaaS Dashboards in 2026 Data visualization, status indicators, brand alignment — everything you need to pick dashboard colors that convert and clarify. 9 min read · Design Systems Accessibility ##### WCAG Contrast Ratio: How to Calculate & Pass Every Test The full guide to WCAG 2.2 contrast requirements — AA vs AAA, how the math works, and the fastest way to fix failing colors. 7 min read · Accessibility Design Tips ##### Dark Mode Color Schemes: A Complete Engineering Guide The technical side of dark mode: contrast math, surface levels, elevation, and how to build schemes that don't strain eyes. 8 min read · Dark Mode View all articles → ###### 🎨 HexColor Pro Free, fast, and beautiful color tools for designers and developers. Built with ❤️ for the creative community. No data collection. No signup required. Just colors. ###### Tools Color Picker Gradient Generator Contrast Checker Palette Generator Color Names All CSS Colors ###### More Tools Color Converter Color Shades Random Color Color Mixer Color Schemes Shadow Generator Color Temperature Text Color ###### Company Blog Privacy Policy Terms of Service Contact · About © 2026 HexColor Pro. All rights reserved. --- ## About HexColor Pro - Who Builds These Color Tools URL: https://hexcolorpro.pages.dev/about ### About HexColor Pro Maintained by Yao Xiangqian · Last updated November 11, 2026 HexColor Pro is an independent, free color toolkit for web designers and developers. It offers 13 browser-based tools for picking colors, generating CSS gradients and palettes, checking WCAG contrast, and converting between HEX, RGB, HSL, HSV, and CMYK — plus a written guide and a blog on color theory and accessibility. #### What is on this site - 13 tools — color picker, gradient generator, contrast checker, palette generator, color schemes, converter, color names, shadow generator, random color, mixer, shades, temperature, and text color. - A complete guide walking through every tool with worked examples. - A blog covering color theory, WCAG accessibility, palettes, and design systems. #### How the tools work Every tool runs entirely in your browser. Nothing is uploaded: colors you enter are processed by JavaScript on your device, and no account is required to use any feature. The pages are static HTML served from a CDN, so they load fast and work the same on any modern browser. HexColor Pro is free and supported by advertising. Ads never gate a tool and never change a computed result — the color math is plain JavaScript you can inspect in the page source. #### Who builds it HexColor Pro is built and maintained by Yao Xiangqian , an independent developer ( github.com/yxq1337 ). It started as a set of internal utility pages for everyday design work — checking a contrast pair, converting a hex value, building a quick gradient — and was published so other people could use them without a signup or a paywall. Every tool is written and tested by the same person who writes the articles, so a claim on a blog page and the behavior of the tool on the adjacent page come from the same implementation. Questions, corrections, and tool requests go to the contact page . #### Background Yao Xiangqian is an independent developer who builds small, self-contained browser tools. Every tool on this site — the WCAG contrast math, the HEX/RGB/HSL/HSV/CMYK conversions, the mixing and ramp generation — is plain JavaScript written for that page, with no framework and no build step. The articles come from the same person, so a claim about how a ratio is computed can be checked against the code that computes it, one click away. The work here is front-end — semantic HTML, plain CSS, and client-side JavaScript — and behind it sit ten years of design-system work: component libraries and color systems where a token that fails contrast is a bug, not a taste difference. #### How the content is written and updated The tool pages and articles are written by the maintainer. Where a claim depends on a standard, it cites the primary source — accessibility thresholds follow the W3C Web Content Accessibility Guidelines (WCAG) 2.2 , published 5 October 2023, rather than secondary summaries. Articles show a publication date, and are revised when a cited standard or browser behavior changes. If you spot an error, say which page and what is wrong; corrections are made on the page itself rather than in a reply, so the next reader sees the fix. #### Using this site's content You are welcome to quote or cite these pages with a link back. Machine-readable descriptions for AI agents are published at llms.txt and llms-full.txt . © 2026 HexColor Pro · Home · Blog · Guide · Privacy · Terms · Contact · About --- ## How to Use HexColor Pro — Complete Guide to All Tools URL: https://hexcolorpro.pages.dev/guide ### 📖 Complete Guide to HexColor Pro Everything you need to know to get the most out of every color tool on this site. ##### 📋 Table of Contents - 1 Color Picker - 2 Color Converter - 3 Gradient Generator - 4 Contrast Checker - 5 Palette Generator - 6 Color Schemes - 7 Color Names Finder - 8 Shadow Generator - 9 Keyboard Shortcuts - ? FAQ #### 🎨 1. Color Picker The Color Picker is our flagship tool. It lets you explore any color in detail — see its hex, RGB, HSL, and CMYK values, plus a full palette of related colors. ##### How to use it: - Click the color wheel or type a hex code (like #6366F1 ) in the input box. - Use the sliders to fine-tune hue, saturation, and lightness. - Scroll down to see automatically generated harmonies: complementary, analogous, triadic, and more. - Click any color value to copy it to your clipboard. - Use the shade/tint palette to find lighter or darker versions of the same color. 💡 Pro tip: Click the eyedropper icon (in supported browsers) to pick a color from anywhere on your screen — even from outside the browser window. Open Color Picker → #### 🔄 2. Color Converter Convert between 8 different color formats instantly: HEX, RGB, HSL, CMYK, HSV, HWB, LAB, and XYZ. ##### How to use it: - Enter a color value in any of the input fields — it doesn't matter which one. - All other formats update automatically as you type. - Click the copy button next to any value to copy it to your clipboard. - Use the preview area to see how the color looks in context. Supported formats: HEX, RGB, RGBA, HSL, HSLA, CMYK, HSV, HWB, LAB, XYZ 💡 Pro tip: You can paste any valid CSS color value — even named colors like rebeccapurple or tomato — and the converter will recognize it. Open Color Converter → #### 🌈 3. Gradient Generator Create beautiful CSS gradients in seconds. Supports linear, radial, and conic gradients with up to 5 color stops. ##### How to use it: - Choose a gradient type: Linear, Radial, or Conic. - Add or remove color stops using the + and – buttons (2-5 stops supported). - Click each color stop to change its color and position. - Use the angle slider (for linear) or shape controls (for radial) to adjust the gradient direction. - Click "Copy CSS" to copy the full gradient code to your clipboard. - Try a preset from the gallery below to get started fast. 💡 Pro tip: For subtle, professional gradients, choose two colors that are close in hue — like blue to purple, or pink to orange. The closer the hues, the smoother the blend. Open Gradient Generator → #### 👁️ 4. Contrast Checker Check if your text and background colors meet WCAG accessibility standards. Essential for making sure your website is usable by everyone. ##### How to use it: - Enter a text color and a background color (or click to use the color picker). - Instantly see the contrast ratio and pass/fail status for WCAG AA and AAA standards. - Use the live preview to see how sample text looks with your color pair. - Try the "auto-adjust" feature — we'll nudge the colors slightly to make them pass while staying as close as possible to your original. WCAG standards at a glance: - AA Normal: 4.5:1 minimum contrast for body text - AA Large: 3:1 minimum for large text (18pt+ or 14pt bold+) - AAA Normal: 7:1 minimum for enhanced accessibility - AAA Large: 4.5:1 minimum for large text 💡 Pro tip: Contrast requirements are lower for large text because larger text is inherently easier to read. Text counts as "large" at 18pt (24px) or above, or 14pt (18.66px) bold or above. Open Contrast Checker → #### 🎯 5. Palette Generator Generate beautiful, cohesive color palettes from a single base color. Perfect for finding a full design system palette in seconds. ##### How to use it: - Enter a base color — this will be the "anchor" of your palette. - Choose a palette style: Complementary, Analogous, Triadic, Split Complementary, Tetradic, Monochromatic, or Random. - Your palette generates instantly. Click any color to copy its hex code. - Use the shuffle button to generate variations. - Export as CSS, SCSS, or JSON for use in your project. 💡 Pro tip: Start with a monochromatic palette for a clean, professional look. It's nearly impossible to make something that looks bad with a single hue. Open Palette Generator → #### ✨ 6. Color Schemes Browse curated color schemes for different moods and use cases — from warm and energetic to calm and professional. ##### How to use it: - Scroll through the categorized color scheme gallery. - Click a category tag (Warm, Cool, Pastel, Dark, Vibrant, Minimal) to filter. - Click any color in a scheme to copy its hex code. - Use the "Apply to Palette" button to send a scheme to the Palette Generator for further customization. Browse Color Schemes → #### 📚 7. Color Names Finder Find the name of any color. We match your color against a library of over 1,500 named colors to find the closest match. ##### How to use it: - Enter a hex code or use the color picker to select a color. - Instantly see the closest named color match, along with the color's hex, RGB, and HSL values. - Scroll down to see similar named colors ranked by similarity. - Click any color name to copy its hex code. Our color name database includes: - All 148 standard CSS/HTML named colors - X11 color names - Popular designer palette colors - Pantone-inspired names 💡 Pro tip: Need to communicate a color to a client or teammate? Use the color name instead of the hex code — "dusty rose" is much easier to remember than "#D4869C." Open Color Names → #### 🌓 8. Shadow Generator Create beautiful CSS box-shadows with a visual editor. Adjust blur, spread, distance, color, and opacity in real time. ##### How to use it: - Use the sliders to adjust offset-X, offset-Y, blur radius, spread radius, and opacity. - Choose a shadow color — try colored shadows for a modern look. - Add multiple shadow layers for depth (click "Add Layer"). - See a live preview of the shadow on the demo card. - Click "Copy CSS" to copy the full box-shadow code. 💡 Pro tip: For natural-looking shadows, use multiple layers: a soft, large shadow (far light) and a sharper, smaller shadow (near light). This mimics how real light works. Open Shadow Generator → #### ⌨️ 9. Tips & Shortcuts All HexColor Pro tools support these common shortcuts and features: - Click to copy: Click any hex, RGB, or HSL value to copy it to your clipboard. - Color input: You can paste any valid CSS color — hex, rgb(), hsl(), or even color names. - # is optional: When typing a hex code, you can skip the # symbol. - 3-digit hex: Short hex codes like #f00 work everywhere. - Dark mode: The site follows your system's dark mode preference automatically. #### ❓ Frequently Asked Questions ##### Is HexColor Pro free to use? Yes! All tools on HexColor Pro are completely free to use. There's no sign-up required and no hidden fees. ##### Do I need to install anything? No. HexColor Pro runs entirely in your web browser. Just visit the site and start using the tools — no downloads, no plugins, no account needed. ##### Does HexColor Pro work offline? Most of our tools work even if your internet connection drops, since all the color calculations happen in your browser. Just bookmark the page and you're good to go. ##### Are the colors accurate? All color conversions use standard math formulas (sRGB color space). Your display will affect how colors look, but the values are mathematically correct. ##### Can I suggest a new tool? Absolutely! We're always adding new tools. Use the contact page to send us your suggestions. ##### What browsers are supported? All modern browsers: Chrome, Firefox, Safari, Edge, and Brave. Some advanced features (like the eyedropper tool) may only work in Chromium-based browsers. © 2026 HexColor Pro · Home · Blog · Privacy · Terms · Contact · About --- ## Color Design Blog - Tips, Tutorials & Guides | HexColor Pro URL: https://hexcolorpro.pages.dev/blog ### Color Design Blog Color theory, design tips, and practical guides for creators 📊 Original data ##### 37% of brand accents fail WCAG AA with white text — we measured 70 top sites We extracted the dominant accent colour from 70 popular homepages and checked it against WCAG 2.2. Nearly four in ten cannot carry white labels at 4.5:1; with black text almost all of them pass. Raw CSV included. Nov 11, 2026 6 min read 🏥 Accessibility ##### Accessible Color Palettes for Healthcare & Government Websites How to build WCAG-compliant color systems for healthcare, government, and public services where accessibility is the law. Nov 8, 2026 10 min read 📊 Design Systems ##### Best Color Palettes for SaaS Dashboards in 2026 Data visualization, status indicators, brand alignment — everything you need to pick dashboard colors that convert and clarify. Nov 8, 2026 9 min read ⚫ Design Tips ##### How to Generate a Monochromatic Color Palette (With Tools) Monochrome palettes are elegant, but easy to get wrong. Learn the math behind tints, shades, and tones — plus a generator tool. Nov 8, 2026 8 min read 🌙 Design Tips ##### Dark Mode Color Schemes: A Complete Engineering Guide The technical side of dark mode: contrast math, surface levels, elevation, and how to build schemes that don't strain eyes. Nov 8, 2026 8 min read ♿ Accessibility ##### WCAG Contrast Ratio: How to Calculate & Pass Every Test The full guide to WCAG 2.2 contrast requirements — AA vs AAA, how the math works, and the fastest way to fix failing colors. Nov 8, 2026 7 min read 🔢 Color Basics ##### Hex to RGB: Complete Conversion Guide (With Formula) Everything you need to know about converting hex codes to RGB — the formula, the code, the shortcuts, and real-world examples. Nov 8, 2026 6 min read 🌈 Color Theory ##### What Is HSL Color? A Developer-Friendly Guide Hue, Saturation, Lightness — why HSL is the most intuitive color model for UI work, and how to use it like a pro. Nov 8, 2026 6 min read 🧮 Color Basics ##### How Many Hex Colors Are There? (It's More Than You Think) 16,777,216 — or is it? Let's unpack the true number of hex colors, including alpha, named colors, and browser quirks. Nov 8, 2026 5 min read ❤️ Color Basics ##### What Color Is #FF0000? Understanding Hex Color Codes #FF0000 is red — but why? Learn how hex codes work, how to read them at a glance, and 50+ common hex colors memorized fast. Nov 8, 2026 7 min read 🖨️ Color Theory ##### CMYK vs RGB: Why Colors Look Different On Screen vs Print Why your printed flyer never matches the screen. Understand the physics of additive vs subtractive color, and how to fix it. Nov 8, 2026 7 min read 🧠 Color Theory ##### Color Psychology in Branding: What Your Colors Say About You From trust (blue) to urgency (red) — how colors shape perception and how to choose brand colors that match your message. Nov 7, 2026 7 min read 🌃 Design Tips ##### Dark Mode Design Best Practices for 2026 Dark mode isn't just inverting colors. Here are the 12 rules every designer should follow for accessible, beautiful dark UIs. Nov 7, 2026 8 min read 🎨 Design Tips ##### Web Color Palette Guide: Pick Colors Users Will Love A step-by-step guide to building effective web color palettes — from primary colors to neutrals to accent shades. Nov 7, 2026 8 min read ✨ Trends ##### Gradient Design Trends 2026: What's In & What's Out Mesh gradients, grain gradients, aurora effects — the gradient styles taking over UI design in 2026, and how to make them. Nov 7, 2026 6 min read 🎨 Color Theory ##### Color Theory Basics Every Designer Should Know The fundamentals: color wheel, harmonies, temperature, value, and how to combine colors that actually look good together. Nov 7, 2026 8 min read ♿ Accessibility ##### The Complete Guide to Color Contrast & Accessibility Everything you need to know about color contrast, WCAG compliance, and building websites that work for everyone. Nov 7, 2026 7 min read © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## All 148 CSS Named Colors — Hex, RGB & HSL Reference | HexColor Pro URL: https://hexcolorpro.pages.dev/colors ### All 148 CSS named colors CSS defines 148 named colors — keywords such as rebeccapurple, chartreuse, and lightgoldenrodyellow — each mapping to one exact sRGB value. Every entry below lists its hex code, RGB and HSL values, WCAG contrast on black and white, and a nine-step tint-and-shade ramp. Grouped by hue. Names are case-insensitive in CSS: RebeccaPurple and rebeccapurple are the same color. #### Light / white (23) - Alice Blue #F0F8FF - Azure #F0FFFF - Beige #F5F5DC - Blanched Almond #FFEBCD - Cornsilk #FFF8DC - Floral White #FFFAF0 - Ghost White #F8F8FF - Honeydew #F0FFF0 - Ivory #FFFFF0 - Lavender Blush #FFF0F5 - Lemon Chiffon #FFFACD - Light Cyan #E0FFFF - Light Goldenrod Yellow #FAFAD2 - Light Yellow #FFFFE0 - Linen #FAF0E6 - Mint Cream #F5FFFA - Old Lace #FDF5E6 - Papaya Whip #FFEFD5 - Seashell #FFF5EE - Snow #FFFAFA - White #FFFFFF - White Smoke #F5F5F5 - Yellow #FFFF00 #### Grays (11) - Black #000000 - Dark Gray #A9A9A9 - Dark Grey #A9A9A9 - Dim Gray #696969 - Dim Grey #696969 - Gainsboro #DCDCDC - Gray #808080 - Grey #808080 - Light Gray #D3D3D3 - Light Grey #D3D3D3 - Silver #C0C0C0 #### Red / pink (21) - Brown #A52A2A - Coral #FF7F50 - Crimson #DC143C - Dark Red #8B0000 - Dark Salmon #E9967A - Firebrick #B22222 - Hot Pink #FF69B4 - Indian Red #CD5C5C - Light Coral #F08080 - Light Pink #FFB6C1 - Light Salmon #FFA07A - Maroon #800000 - Misty Rose #FFE4E1 - Orange Red #FF4500 - Pale Violet Red #DB7093 - Pink #FFC0CB - Red #FF0000 - Rosy Brown #BC8F8F - Salmon #FA8072 - Sienna #A0522D - Tomato #FF6347 #### Orange / brown (18) - Antique White #FAEBD7 - Bisque #FFE4C4 - Burlywood #DEB887 - Chocolate #D2691E - Dark Goldenrod #B8860B - Dark Orange #FF8C00 - Gold #FFD700 - Goldenrod #DAA520 - Khaki #F0E68C - Moccasin #FFE4B5 - Navajo White #FFDEAD - Orange #FFA500 - Peach Puff #FFDAB9 - Peru #CD853F - Saddle Brown #8B4513 - Sandy Brown #F4A460 - Tan #D2B48C - Wheat #F5DEB3 #### Yellow / olive (3) - Dark Khaki #BDB76B - Olive #808000 - Pale Goldenrod #EEE8AA #### Green (20) - Aquamarine #7FFFD4 - Chartreuse #7FFF00 - Dark Green #006400 - Dark Olive Green #556B2F - Dark Sea Green #8FBC8F - Forest Green #228B22 - Green #008000 - Green Yellow #ADFF2F - Lawn Green #7CFC00 - Light Green #90EE90 - Lime #00FF00 - Lime Green #32CD32 - Medium Aquamarine #66CDAA - Medium Sea Green #3CB371 - Medium Spring Green #00FA9A - Olive Drab #6B8E23 - Pale Green #98FB98 - Sea Green #2E8B57 - Spring Green #00FF7F - Yellow Green #9ACD32 #### Cyan / teal (16) - Aqua #00FFFF - Cadet Blue #5F9EA0 - Cyan #00FFFF - Dark Cyan #008B8B - Dark Slate Gray #2F4F4F - Dark Slate Grey #2F4F4F - Dark Turquoise #00CED1 - Deep Sky Blue #00BFFF - Light Blue #ADD8E6 - Light Sea Green #20B2AA - Medium Turquoise #48D1CC - Pale Turquoise #AFEEEE - Powder Blue #B0E0E6 - Sky Blue #87CEEB - Teal #008080 - Turquoise #40E0D0 #### Blue (19) - Blue #0000FF - Cornflower Blue #6495ED - Dark Blue #00008B - Dark Slate Blue #483D8B - Dodger Blue #1E90FF - Lavender #E6E6FA - Light Sky Blue #87CEFA - Light Slate Gray #778899 - Light Slate Grey #778899 - Light Steel Blue #B0C4DE - Medium Blue #0000CD - Medium Slate Blue #7B68EE - Midnight Blue #191970 - Navy #000080 - Royal Blue #4169E1 - Slate Blue #6A5ACD - Slate Gray #708090 - Slate Grey #708090 - Steel Blue #4682B4 #### Purple / violet (17) - Blue Violet #8A2BE2 - Dark Magenta #8B008B - Dark Orchid #9932CC - Dark Violet #9400D3 - Deep Pink #FF1493 - Fuchsia #FF00FF - Indigo #4B0082 - Magenta #FF00FF - Medium Orchid #BA55D3 - Medium Purple #9370DB - Medium Violet Red #C71585 - Orchid #DA70D6 - Plum #DDA0DD - Purple #800080 - Rebecca Purple #663399 - Thistle #D8BFD8 - Violet #EE82EE © 2026 HexColor Pro · Home · Blog · About · Contrast checker --- ## Embed the Contrast Checker — Free WCAG Widget | HexColor Pro URL: https://hexcolorpro.pages.dev/embed ### Embed the contrast checker Drop a working WCAG contrast checker into any page with one iframe. No account, no tracking cookies, no ads, no build step — it is a static page that runs the contrast math in the visitor's browser. #### Live preview #### The embed code ``` Contrast checker by HexColor Pro ``` Copy embed code #### How to use it - Paste the snippet into a blog post, a design-system doc, or an accessibility checklist page. - The widget is 420px wide at most and 300px tall; it scales down on mobile. - Results update as the visitor types or picks a color — nothing is sent to a server. - Keep the attribution line: it is the only condition for using the embed. #### What it checks The widget computes the WCAG 2.2 contrast ratio with the relative-luminance formula and reports the three thresholds that matter in practice: AA normal text (4.5:1), AA large text (3:1), and AAA normal text (7:1). For the full tool — with suggestions that reach a target ratio and a UI-component check — use the contrast checker . © 2026 HexColor Pro · Home · About · Blog · CSS colors --- ## Privacy Policy - HexColor Pro URL: https://hexcolorpro.pages.dev/privacy ### Privacy Policy Last updated: November 2026 #### Introduction Welcome to HexColor Pro. This Privacy Policy explains how we collect, use, and protect your information when you use our website. #### Information We Collect No Personal Data Collected Directly: HexColor Pro is a client-side color tool. All color calculations happen in your browser. We do not store or process any personal data on our servers. Analytics & Advertising: We may use third-party services (such as Google Analytics, Google AdSense, or Ezoic) that collect anonymized usage data to improve the service and display relevant advertisements. These services may use cookies or similar technologies. #### Cookies We use localStorage in your browser to save your recent color history and preferences. This data never leaves your device. Third-party advertisers may also use cookies to serve ads based on your prior visits. #### Third-Party Services Our website may contain links to third-party websites. We have no control over and assume no responsibility for the content, privacy policies, or practices of any third-party sites or services. #### Google AdSense / Ezoic Google, as a third-party vendor, uses cookies to serve ads on our site. Google's use of the DART cookie enables it to serve ads based on your visit. You may opt out of the use of the DART cookie by visiting Google ad and content network privacy policy. #### Your Rights You have the right to access, correct, or delete your personal data. Since we do not store personal data on our servers, most of these rights are exercised directly through your browser settings or third-party service providers. #### Changes to This Policy We may update this privacy policy from time to time. We will notify you of any changes by posting the new policy on this page. #### Contact Us If you have any questions about this Privacy Policy, please contact us via our contact page . ← Back to HexColor Pro --- ## Terms of Service - HexColor Pro URL: https://hexcolorpro.pages.dev/terms ### Terms of Service Last updated: November 2026 #### Acceptance of Terms By accessing and using HexColor Pro, you accept and agree to be bound by these Terms of Service. If you do not agree to these terms, please do not use the website. #### Service Description HexColor Pro provides free color tools including a color picker, palette generator, and contrast checker. The service is provided "as is" without warranty of any kind. #### Use License Permission is granted to use HexColor Pro for personal and commercial purposes. You may not copy, modify, distribute, or sell the service itself without explicit permission. #### Disclaimer HexColor Pro is provided on an "as is" and "as available" basis. We make no warranties, expressed or implied, about the accuracy, reliability, or suitability of the tools for any purpose. #### Limitations In no event shall HexColor Pro be liable for any damages arising out of the use or inability to use the tools on this website. #### Advertisements We may display advertisements on the website to support the free service. These ads are served by third-party providers and we are not responsible for the content of any advertisements. #### Modifications We reserve the right to modify or discontinue the service at any time without notice. We may also revise these terms from time to time. #### Governing Law These terms shall be governed by and construed in accordance with applicable law, without regard to its conflict of law provisions. #### Contact Questions about these Terms? Contact us via our contact page . ← Back to HexColor Pro --- ## Contact - HexColor Pro URL: https://hexcolorpro.pages.dev/contact ### Contact Us Have feedback, suggestions, or questions about HexColor Pro? We'd love to hear from you. Email: hello@hexcolorpro.com Response time: We try to respond to all inquiries within 3-5 business days. #### Partnerships For partnership or advertising inquiries, please email us with "Partnership" in the subject line. ← Back to HexColor Pro --- ## Color Picker - Free Online HEX, RGB, HSL Color Picker | HexColor Pro URL: https://hexcolorpro.pages.dev/color-picker ### Color Picker Pick any color and get instant HEX, RGB, HSL, HSV & CMYK values A color picker lets you choose a color visually or by typing a code, then copy it in any format you need. HexColor Pro returns HEX, RGB, HSL, HSV, and CMYK for the same color and updates every field the moment you edit one of them. ##### Color Values HEX #6366f1 RGB 99, 102, 241 HSL 239°, 84%, 67% HSV 239°, 59%, 95% CMYK 59%, 58%, 0%, 5% Name Royal Blue ##### Recent Colors #### How to Use the Color Picker ##### 🎯 What is a Color Picker? A color picker is a tool that lets you select and identify colors. It's essential for designers, developers, and anyone working with digital color. Our color picker gives you every color format you need in real-time. ##### 📋 What Do the Color Formats Mean? - HEX (#RRGGBB) — The most common format for web design. Six hexadecimal digits representing red, green, and blue channels. - RGB (Red, Green, Blue) — Additive color model used in screens. Each value ranges from 0-255. - HSL (Hue, Saturation, Lightness) — Human-friendly color model. Hue = color (0-360°), Saturation = intensity, Lightness = brightness. - HSV (Hue, Saturation, Value) — Similar to HSL but uses Value/brightness instead of lightness. Popular in design tools. - CMYK (Cyan, Magenta, Yellow, Key) — Subtractive color model used for print. Key = black. ##### 💡 Pro Tips - Click any value to copy it to your clipboard instantly - Your recent colors are saved automatically (in your browser) - Use the palette generator to build full color schemes from one color - Check contrast to make sure your text is accessible ##### 🔗 Related Tools Check out our Gradient Generator , Contrast Checker , and Palette Generator to take your color work to the next level. #### Frequently asked questions ##### What is a hex color code? A hex code is a six-digit hexadecimal notation for an sRGB color, written #RRGGBB. Each pair runs from 00 to FF, so #FF0000 means red 255, green 0, blue 0. Three-digit shorthand such as #F00 expands to #FF0000. ##### How many colors can a color picker represent? An 8-bit-per-channel picker covers 256 × 256 × 256 = 16,777,216 colors, usually written as 16.7 million. Adding an alpha channel multiplies that by 256 for transparency levels. ##### Should I use HEX or HSL in CSS? Both are valid. HEX is compact and universally supported; HSL is easier to reason about when you need lighter, darker, or desaturated variants of one hue. Pick one convention per project and convert only when you need to share a value. ##### Why do the same HEX values look different on my phone? Screens differ in gamma, white point, calibration, and brightness, so identical codes render differently. Check critical colors on a calibrated display, and never judge contrast by eye alone — measure the ratio instead. © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## Gradient Generator - Free CSS Gradient Maker | HexColor Pro URL: https://hexcolorpro.pages.dev/gradient-generator ### CSS Gradient Generator Create stunning CSS gradients. Linear, radial, and conic — with live preview and one-click copy. A CSS gradient generator turns a set of color stops into a linear, radial, or conic gradient and writes the CSS for you. In HexColor Pro you add or move stops, watch the result live, and copy the finished background declaration — it stays pure CSS, so it scales without image files. Type Linear Radial Conic Angle: 135° ##### Color Stops + Add Color Stop ##### CSS Code Copy background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); #### Preset Gradients Click any preset to apply it instantly. #### How to Use CSS Gradients ##### 📐 Linear Gradients The most common type. Colors transition along a straight line. Use the angle slider to rotate the direction. - to right — left to right (equivalent to 90°) - to bottom right — diagonal gradient - 135deg — precise angle control ##### ⭕ Radial Gradients Colors transition outward from a center point. Great for backgrounds, buttons, and spotlight effects. ##### 🎠 Conic Gradients Colors transition around a center point (like a color wheel). Perfect for pie charts, color wheels, and creative effects. ##### 💡 Pro Tips - Use 3-5 color stops for a rich, natural gradient - Adjust stop positions to control where each color starts and ends - Pair with the Color Picker to find the perfect starting colors - Use subtle gradients (similar hues) for backgrounds, bold ones for accents ##### 🎯 More Tools Try our Palette Generator to build full color schemes, or the Contrast Checker to ensure accessibility. #### Frequently asked questions ##### What is the difference between linear, radial, and conic gradients? Linear blends colors along a straight line at a set angle, radial blends outward from a center point, and conic sweeps colors around a center like a clock face. CSS exposes them as linear-gradient(), radial-gradient(), and conic-gradient(), all supported in current browsers. ##### How many color stops should a gradient have? Two stops are the minimum and stay predictable across browsers; three or four let you control the midpoint. Past about six stops a gradient starts to band on 8-bit displays, so add noise or interpolate in a wider color space instead of adding more stops. ##### Why does my gradient look banded? Banding comes from 8-bit color steps: a slow transition between similar colors shows visible stripes. Shorten the transition distance, add a subtle noise overlay, or interpolate in a wider color space such as oklab with CSS color interpolation. © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## Color Contrast Checker - WCAG Accessibility Test | HexColor Pro URL: https://hexcolorpro.pages.dev/contrast-checker ### Color Contrast Checker Test WCAG accessibility compliance. AA & AAA contrast ratios in real time. The WCAG contrast ratio measures the luminance difference between text and its background on a scale from 1:1 to 21:1. WCAG 2.2 Level AA requires 4.5:1 for normal text and 3:1 for large text; Level AAA raises those thresholds to 7:1 and 4.5:1. Text Color Background Color Sample Text Large This is sample body text to preview contrast. 5.21 Contrast Ratio AA (Normal) Pass — 4.5:1 required AA (Large) Pass — 3:1 required AAA (Normal) Fail — 7:1 required AAA (Large) Pass — 4.5:1 required ###### 💡 Suggested Fixes Try these adjustments to pass AA: #### Understanding WCAG Contrast Standards ##### 📏 What is Contrast Ratio? Contrast ratio measures the difference in luminance between two colors. The scale ranges from 1:1 (same color) to 21:1 (black on white). Higher ratios mean easier readability. ##### 🏆 WCAG Levels Explained - AA Normal — 4.5:1 minimum. Standard for body text (< 18pt / < 14pt bold). - AA Large — 3:1 minimum. For large text (≥ 18pt / ≥ 14pt bold). - AAA Normal — 7:1 minimum. Enhanced accessibility for body text. - AAA Large — 4.5:1 minimum. Enhanced for large text. ##### 🔤 What Counts as "Large Text"? WCAG defines large text as at least 18pt (24px) regular weight, or 14pt (18.66px) bold. If text is below that threshold, it falls under "Normal" requirements. ##### 💡 Pro Tips for Better Contrast - Dark text on light backgrounds is generally more readable than the reverse - Use the 60-30-10 rule: 60% dominant, 30% secondary, 10% accent color - Test on actual screens — different displays vary in brightness and calibration - Don't rely on color alone to convey information (e.g., use icons + color for status) ##### 🔗 Related Tools Try the Palette Generator for harmonious color schemes, and the Color Picker to find perfect colors. #### Frequently asked questions ##### What is a good contrast ratio for body text? For body text, aim for at least 4.5:1, the WCAG 2.2 AA minimum for normal-size text. Many accessibility teams target 7:1 for long-form reading. A ratio of 3:1 is not enough for paragraph text — it only satisfies the large-text and UI-component rules. ##### Does a 4.5:1 ratio apply to buttons and borders? No. Buttons, borders, icons, and other essential UI graphics fall under WCAG 1.4.11, which requires 3:1 against adjacent colors. The 4.5:1 requirement in 1.4.3 covers text; large text may use 3:1. ##### Is contrast ratio always the same as perceived readability? Close, but not identical. The ratio uses relative luminance and ignores font weight, letter spacing, and ambient light. A 4.5:1 pair in a thin 12px typeface can read worse than a 4:1 pair in a heavy 20px one, so treat the minimum as a floor. ##### Why does black on white score 21:1 and not 100:1? The scale is capped by the formula (L1 + 0.05) / (L2 + 0.05). With black at luminance 0 and white at 1, the result is 1.05 / 0.05 = 21. There is no higher value in WCAG, which is why 21:1 is the practical maximum. ##### Do transparency and opacity affect the ratio? Yes. WCAG is evaluated on the final rendered colors, so a 60% opaque overlay over a background must be resolved to one solid color first. Blend the alpha channel over the layer beneath it, then test the resulting pair. © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## Color Palette Generator - Beautiful Color Schemes | HexColor Pro URL: https://hexcolorpro.pages.dev/palette-generator ### Color Palette Generator Pick one color, get 7+ harmonious palettes. Complementary, analogous, triadic, and more. A palette generator derives colors that work together from a single base color. HexColor Pro applies seven harmony rules — complementary, analogous, triadic, split-complementary, tetradic, monochromatic, and shades — and returns ready-to-copy HEX values for each palette. Base Color 🎲 Random Complementary Analogous Triadic Split Comp. Tetradic Mono Shades ##### Colors ##### CSS Variables Copy #### Color Harmony Modes Explained ##### 🔄 Complementary Two colors opposite each other on the color wheel. Creates high contrast and vibrant combinations. Great for call-to-action buttons and accent elements. ##### 🌈 Analogous Colors next to each other on the wheel. Creates harmonious, natural-feeling palettes. Perfect for backgrounds and cohesive designs. ##### 🔺 Triadic Three colors evenly spaced on the wheel (120° apart). Balanced and vibrant with good contrast. Use one dominant, two accents. ##### ✂️ Split Complementary A base color plus the two colors adjacent to its complement. Less tension than straight complementary, but still visually interesting. ##### 💎 Tetradic (Rectangle) Four colors in two complementary pairs. Rich palette with lots of variety. Use one dominant, rest as accents. ##### ⚫ Monochromatic Variations of a single hue (different lightness/saturation). Clean, elegant, and easy to get right. Great for minimalist designs. ##### ⚪ Shades From light tint to dark shade of the same color. Useful for UI elements like buttons, cards, and text hierarchy. #### Frequently asked questions ##### What makes a color palette harmonious? Harmony comes from a consistent relationship on the color wheel plus a deliberate contrast budget. Complementary, analogous, and triadic schemes each fix one kind of relationship; a usable palette then adds one accent and enough lightness separation for text and UI states. ##### How many colors should a website palette have? Most production interfaces settle on five to seven: one or two neutrals for surfaces and text, one primary, one accent, and one or two semantic colors for success and error. A larger token set is fine, but the visible colors on one screen stay small. ##### What is the 60-30-10 rule? It is a proportion guideline: 60% of the visual area in a dominant color, 30% in a secondary, 10% in an accent. It keeps a palette from feeling evenly weighted, and it maps cleanly onto CSS custom properties for background, surface, and accent. © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## Color Scheme Generator - Color Palette Ideas | HexColor Pro URL: https://hexcolorpro.pages.dev/color-schemes ### Color Scheme Generator Pick a base color and explore 6 classic color harmony schemes. Instant results, ready to copy. A color scheme generator applies classical color-wheel relationships to one base color: complementary sits opposite it, analogous beside it, triadic at 120° intervals. HexColor Pro shows six of these schemes side by side so you can compare them before copying any HEX code. Base Color: 🎲 Random Analogous Complementary Triadic Monochromatic Split Comp. Tetradic #### Analogous 📋 Copy All HEX #### Color Theory: The 6 Classic Schemes ##### 🌈 Analogous Colors next to each other on the color wheel. Creates a harmonious, serene feel. Think sunsets, ocean blues, forest greens. Great for backgrounds and ambient designs. ##### ⚡ Complementary Colors opposite each other on the wheel. High contrast, high energy. Think red-green, blue-orange, purple-yellow. Use sparingly for maximum impact — great for CTAs and highlights. ##### 🔺 Triadic Three colors evenly spaced around the wheel (120° apart). Vibrant and balanced. The classic "primary colors" scheme is triadic. Good for playful, youthful designs. ##### 🎚️ Monochromatic Variations of a single hue — different lightness and saturation. Super elegant and easy to get right. Perfect for minimalist designs, portfolios, and luxury brands. ##### 🔀 Split Complementary A base color plus the two colors adjacent to its complement. Less intense than complementary but still has good contrast. Versatile and visually interesting. ##### 🔷 Tetradic (Double Complementary) Four colors arranged as two complementary pairs. Rich with possibilities but trickier to balance. Best when one color is dominant and the rest support it. ##### 💡 Pro Tips for Using Color Schemes - Follow the 60-30-10 rule: 60% dominant color, 30% secondary, 10% accent - Start with the mood you want — calm? energetic? luxurious? — then pick a scheme - Use neutral colors (white, gray, black) as your base, add color accents on top - Always check accessibility — use our Contrast Checker tool to verify readability - Less is more: start with 2-3 colors before adding more #### Frequently asked questions ##### What are the classic color schemes? Complementary (opposite on the wheel), analogous (adjacent), triadic (three colors evenly spaced), split-complementary (opposite plus its two neighbors), tetradic (two complementary pairs), and monochromatic (one hue at several lightness levels). ##### Which color scheme is best for a website? Analogous and monochromatic schemes read as calm and are easiest to keep accessible; complementary and triadic give stronger contrast but need more discipline. Most sites use one dominant scheme plus a complementary accent rather than a pure scheme throughout. ##### Do color schemes work the same in dark mode? No. Dark surfaces change perceived saturation and contrast: the same hue looks brighter against #0f172a than against white. Re-derive lightness for the dark theme and re-check contrast ratios instead of reusing the light-mode hex values. © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## Color Converter - HEX RGB HSL HSV CMYK | HexColor Pro URL: https://hexcolorpro.pages.dev/color-converter ### Color Converter Convert between HEX, RGB, HSL, HSV, and CMYK. Edit any field, all update instantly. HEX is a six-digit hexadecimal notation for sRGB color — #RRGGBB, where each pair runs from 00 to FF. RGB states the same color as three decimal channels, HSL restates it as hue, saturation, and lightness, and CMYK describes it for print. All four describe one color in different notations. Current Color #6366F1 🎲 Random ##### HEX Copy Hex ##### RGB Copy R (0-255) G (0-255) B (0-255) ##### HSL Copy H (0-360°) S (0-100%) L (0-100%) ##### HSV Copy H (0-360°) S (0-100%) V (0-100%) ##### CMYK Copy C (0-100%) M (0-100%) Y (0-100%) K (0-100%) ##### CSS Values hex rgb() hsl() #### Color Formats Explained ##### 🎨 HEX The most common web color format. Uses 6 hexadecimal digits (00-FF) for red, green, and blue. Example: #FF5733 . Used everywhere in web development — CSS, HTML, design tools. ##### 🔴 RGB Red, Green, Blue — each from 0-255. Direct representation of how screens emit light. Example: rgb(255, 87, 51) . The standard for digital displays. ##### 🌀 HSL Hue (0-360°), Saturation (%), Lightness (%). More intuitive for humans — "pick a hue, make it more/less saturated, lighter/darker." Great for creating color variations programmatically. ##### 💎 HSV Hue, Saturation, Value (brightness). Similar to HSL but "value" goes from black to full color, while HSL lightness goes from black to white. Common in design software. ##### 🖨️ CMYK Cyan, Magenta, Yellow, Key (black). The print standard — based on ink absorption rather than light emission. Convert to CMYK when designing for print. ##### 💡 When to Use Which? - Web / CSS → HEX or HSL (HEX for precision, HSL for easy tweaking) - UI Design → HSL (easy to create consistent color systems) - Print Design → CMYK (ensures accurate print output) - Image Editing → RGB or HSV (full digital color range) #### Frequently asked questions ##### Is HEX the same as RGB? Yes — they are two encodings of the same sRGB value. #FF0000 and rgb(255, 0, 0) are identical, since hex FF is decimal 255. Converting between them is exact arithmetic with no color shift. ##### Why does CMYK look different from RGB? CMYK is a subtractive ink model tied to a specific printer and paper, while RGB is an additive light model tied to a screen. A conversion gives a mathematical match, not a visual one, so proof print-critical colors against the actual press profile. ##### What is HSV used for if HSL exists? HSV and HSL describe the same color family with different axes. HSV keeps full saturation at the top of its value axis, which suits pickers and scrubbing, while HSL's lightness axis maps more directly onto mixing a color with white or black in CSS. ##### Does converting HEX to HSL lose precision? No. Both are three-channel encodings of the same sRGB value, so the conversion itself is lossless. Rounding only appears in the displayed numbers, which are usually shown as whole percentages for readability. © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## Color Name Finder - Hex to Color Name Lookup | HexColor Pro URL: https://hexcolorpro.pages.dev/color-names ### Color Name Finder Look up color names from hex codes, or search by name. 600+ named colors in our database. A color name finder matches a hex code to the closest named color. HexColor Pro compares your value against a database of 600+ named colors, including the CSS named colors, and returns the nearest match with its name, hex, and RGB values. Hex → Name Name → Hex Find Name Search Slate Blue #6A5ACD Closest match (ΔE: 8.3) #### Similar Colors #### About Color Names ##### 🎨 Why Do Colors Have Names? Color names help us communicate about colors precisely. While hex codes are exact, names are memorable and emotional — "coral" evokes a feeling that "#FF7F50" doesn't. ##### 📐 How Matching Works We use the Delta E (ΔE) color difference formula in the Lab color space to find the closest named color to any hex input. A ΔE below 5 means the colors are nearly indistinguishable to the naked eye. ##### 📚 Where Names Come From - Web Colors — the 148 CSS named colors with their exact hex, RGB, and HSL values - X11 Colors — Extended color names from the X Window System - Crayola & Pantone — Popular commercial color systems - Natural Colors — Names inspired by nature (coral, olive, teal) ##### 💡 Pro Tips - Use the color picker to experiment — the closest name updates in real time - Looking for a specific vibe? Search "blue" or "pink" to see all shades - Pair with the Palette Generator to build full schemes #### Frequently asked questions ##### What is the difference between a named color and a hex code? A named color is a human label mapped to a specific value — CSS defines 148 keywords such as rebeccapurple and tomato. A hex code is the exact value. Names help communication; hex guarantees the color. ##### How does a color name finder pick the nearest name? It converts both colors to a distance metric and returns the smallest. RGB distance is fast and common; perceptual spaces such as CIELAB or OKLab better match what the eye calls close, which matters for muted and dark colors. ##### Why does my hex code have no exact name? Named colors cover a few hundred specific values out of the 16.7 million possible hex codes, so almost every code falls between two names. The nearest-name match is an approximation, not an identity. © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## CSS Box Shadow Generator - Free Online Tool | HexColor Pro URL: https://hexcolorpro.pages.dev/shadow-generator ### CSS Box Shadow Generator Create beautiful, smooth shadows with live preview. Copy the CSS in one click. A box-shadow generator builds the CSS box-shadow property from four parameters — offset X, offset Y, blur, and spread — plus a color. HexColor Pro previews the shadow live, including the inset variant, and copies the finished declaration in one click. 📋 Copy CSS ↺ Reset ##### ⚙️ Shadow Controls Offset X 5 px Offset Y 8 px Blur Radius 15 px Spread Radius 0 px Opacity 25 % Color Inset Shadow ##### 💡 Popular Presets Subtle Medium Deep Glow Neon Hard ##### 📝 Generated CSS Copy box-shadow: 5px 8px 15px 0px rgba(0, 0, 0, 0.25); #### Understanding CSS Box Shadow ##### 📐 The Syntax box-shadow: offset-x offset-y blur spread color inset; - offset-x — Horizontal distance (positive = right, negative = left) - offset-y — Vertical distance (positive = down, negative = up) - blur — Softness of the shadow edge (0 = hard edge) - spread — Size increase/decrease of the shadow - color — Shadow color (use rgba for transparency) - inset — Optional keyword for inner shadows ##### 🎯 Design Tips - Use low opacity (10-30%) for natural-looking shadows - Pair multiple shadows for realism: a soft one + a harder one - Match shadow direction to your light source for consistency - Lighter, larger shadows feel more "floating"; tight dark shadows feel "pressed" - For dark mode, use colored shadows (match the element's hue) instead of black ##### ✨ Multiple Shadows You can layer multiple shadows by comma-separating them. This creates more depth than a single shadow: box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 10px 20px rgba(0,0,0,0.1), 0 20px 40px rgba(0,0,0,0.15); #### Frequently asked questions ##### What do the four box-shadow values mean? offset-x and offset-y move the shadow, blur-radius softens its edge, and spread-radius grows or shrinks the shadow before blurring. Positive spread expands it, negative spread contracts it. An optional inset keyword draws the shadow inside the element. ##### Why does my CSS shadow look cheap? Usually too much opacity and too little blur. Real light produces soft, low-contrast shadows: opacity around 0.08–0.15 with a large blur and a slight vertical offset reads as natural, while pure black at 0.5 reads as a sticker. ##### Can I layer multiple shadows? Yes. box-shadow accepts a comma-separated list, and layering two or three shadows — a tight contact shadow plus a wide ambient one — is the usual way to get realistic elevation without filters. © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## Random Color Generator - Generate Random Colors Instantly | HexColor Pro URL: https://hexcolorpro.pages.dev/random-color-generator ### Random Color Generator Generate random colors and palettes instantly. Click to copy in any format. A random color generator produces a color with no input or seed. HexColor Pro returns the HEX, RGB, and HSL values for every result, and can generate a whole random palette when you need several colors at once. Random Color #6366F1 Generate Random Color Copy HEX RGB rgb(99, 102, 241) HSL hsl(239, 84%, 67%) CMYK cmyk(59%, 58%, 0%, 5%) ##### Generate Multiple Colors Count: Pastel only Generate Copy All HEX Codes #### Frequently asked questions ##### Is a random color generator truly random? It uses the browser's pseudo-random number generator (Math.random or crypto.getRandomValues), which is unpredictable in practice but not suitable for secrets. For design work the difference does not matter. ##### What is the difference between a random color and a random palette? A random color is one value drawn from the 16.7 million hex space, so it is usually saturated and rarely usable in UI. A random palette constrains hue, saturation, and lightness to keep the set coherent. ##### How do I reproduce a random color later? You cannot reproduce a value drawn from an unseeded generator. If you need repeatability, record the hex code, or use a seeded generator so the same seed always yields the same sequence. © 2026 HexColor Pro · Home · Blog · About · Privacy · Terms · Contact · About --- ## Color Mixer - Mix Two Colors with Adjustable Ratio | HexColor Pro URL: https://hexcolorpro.pages.dev/color-mixer ### Color Mixer Blend two colors together and generate gradient steps between them. A color mixer blends two colors at a chosen ratio and reports the result. HexColor Pro interpolates channel by channel — a 50/50 mix lands halfway in RGB — and shows the intermediate steps, which makes it easy to build a smooth ramp between two brand colors. ##### Mix Two Colors + = #800080 (click to copy) Mix Ratio 50% / 50% ##### Gradient Steps Steps: Copy All HEX #### Frequently asked questions ##### How is a color mix calculated? By interpolating each channel: mixing two colors at 50% gives ((R1+R2)/2, (G1+G2)/2, (B1+B2)/2) for an RGB mix. Mixing in a perceptual space such as OKLab instead produces a result closer to how the blend appears to the eye. ##### Why does mixing two colors give a muddy result? RGB mixing passes through desaturated midpoints, so mixing complementary hues lands near grey. That is a property of the color model, not a bug; add a third color, or mix in a perceptual space to keep chroma. ##### What is the difference between mixing light and mixing paint? Light is additive: red plus green gives yellow. Paint is subtractive: red plus green gives a dark brown. Screens mix light, so an RGB mixer follows the additive rule. © 2026 HexColor Pro · Home · Blog · About · Privacy · Terms · Contact · About --- ## Color Shades Generator - Tints, Shades & Color Harmonies | HexColor Pro URL: https://hexcolorpro.pages.dev/color-shades-generator ### Color Shades & Harmonies Generator Generate tints, shades, and color harmonies from any base color. A shades generator derives tints (mixed toward white) and shades (mixed toward black) from a base color, usually as a stepped ramp. HexColor Pro outputs the full ramp plus harmony sets, so one token can produce hover, active, and disabled states that stay in step. ##### Generate Shades & Tints Base Color Number of Steps Copy All HEX Codes Complementary Opposite on the color wheel Analogous Adjacent colors Triadic 3 colors equidistant #### Frequently asked questions ##### What is the difference between tints, shades, and tones? A tint mixes the base color with white, a shade mixes it with black, and a tone mixes it with grey. Tints step toward pastel, shades toward deep and dark, tones toward muted. ##### How many steps should a color ramp have? Ten steps is the usual default because it maps cleanly onto 50–900 token naming. Fewer than five gives too little control over hover and disabled states; more than twelve rarely earns its maintenance cost. ##### Should a shade ramp be linear in lightness? Not necessarily. Linear mixing in sRGB compresses perceived lightness at the dark end, so many design systems space the steps perceptually using OKLCH or HSL lightness, so that 500 and 600 look evenly separated. © 2026 HexColor Pro · Home · Blog · About · Privacy · Terms · Contact · About --- ## Color Temperature Calculator - Kelvin to RGB/HEX Converter | HexColor Pro URL: https://hexcolorpro.pages.dev/color-temperature ### Color Temperature Calculator Convert Kelvin temperature to RGB/HEX color. From warm candlelight to cool blue sky. Color temperature converts a Kelvin value into an RGB or HEX color, based on the light a black body emits at that temperature: roughly 1,000K reads as candlelight, 6,500K as daylight, and 10,000K as clear blue sky. HexColor Pro maps Kelvin to hex for lighting and UI references. ##### Color Temperature Calculator Convert between Kelvin temperature and RGB/HEX color values. From warm candlelight to cool daylight. Temperature (Kelvin) K Warm Cool #FFF5E6 (click to copy) RGB rgb(255, 245, 230) HSL hsl(38, 100%, 95%) Description Daylight Neutral ##### Common Color Temperatures Candle 1850K Warm Bulb 2700K Soft White 3000K Cool White 4000K Daylight 5000K Neutral White 6500K Cool Daylight 7500K Sky Blue 10000K #### Frequently asked questions ##### What does color temperature measure? It describes the color of light on the Kelvin scale, from about 1,800K for candlelight through 6,500K for daylight to over 10,000K for clear sky. Lower values read warm and orange, higher values cool and blue. ##### Why does 6,500K look different on my screen than in a photo? Camera white balance, display calibration, and surrounding colors all shift perception. The Kelvin value describes the light source objectively; it does not guarantee how a particular screen renders it. ##### How do I use color temperature in UI design? Use warm tints for calm, ambient surfaces and cool tints for technical or focus-heavy ones, and keep the shift consistent across a theme. Re-check contrast after shifting temperature, since luminance changes with it. © 2026 HexColor Pro · Home · Blog · About · Privacy · Terms · Contact · About --- ## Text Color Generator - Best Contrast Color for Any Background | HexColor Pro URL: https://hexcolorpro.pages.dev/text-color-generator ### Text Color Generator Get the most readable text color for any background. WCAG contrast compliant. A text color generator picks the most readable text color for a given background. HexColor Pro tests light and dark candidates against the background, returns the pair with the highest contrast ratio, and reports whether that pair clears the WCAG AA threshold. ##### Auto Text Color Generator Pick a background color and get the most readable text color (black or white) based on WCAG contrast ratios. Background Color Aa Bb Cc Sample text on this background The quick brown fox jumps over the lazy dog Copy Text Color HEX Best Text Color #FFFFFF Contrast Ratio 4.5 : 1 AA Pass WCAG Levels AA Normal ✓ AA Large ✓ AAA Normal ✓ ##### Popular Background Colors #### Frequently asked questions ##### How do I choose the best text color for a background? Pick the candidate that maximizes contrast ratio: black text on light backgrounds, white on dark, computed with the WCAG relative-luminance formula. Then verify the ratio clears 4.5:1 for body text rather than trusting the choice by eye. ##### Is black or white always the best choice? No. Near-black (#111827) and near-white (#f8fafc) usually read softer than the pure values and avoid the harsh edge pure black and white produce on large text areas. Both still need a measured contrast check. ##### What about text over images or gradients? Contrast is judged against the worst-case pixel behind each glyph. Add a scrim or solid overlay, or test the lightest and darkest regions separately; a single average value hides the failures. © 2026 HexColor Pro · Home · Blog · About · Privacy · Terms · Contact · About --- ## WCAG Contrast Ratio Explained: How to Check & Fix Color Accessibility | HexColor Pro Blog URL: https://hexcolorpro.pages.dev/blog/wcag-contrast-ratio-guide ### WCAG Contrast Ratio Explained: How to Check & Fix Color Accessibility Complete guide to WCAG 2.2 contrast ratios, AA vs AAA standards, how to measure contrast, and common mistakes that make your site inaccessible. By Yao Xiangqian · Nov 8, 2026 · 1900 words · 8 min read #### What Is WCAG and Why Does It Matter? The Web Content Accessibility Guidelines (WCAG) are a set of recommendations for making web content accessible to people with disabilities. Published by the W3C, they're the global standard for digital accessibility. Color contrast is one of the most basic — and most commonly violated — accessibility requirements. An estimated 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Poor contrast doesn't just affect them: it affects everyone using your site in bright sunlight, on low-brightness screens, or at small font sizes. 📊 Legal note: WCAG 2.1 AA is the legal standard in the EU (EN 301 549), the US (for federal and many state websites under ADA), Canada, Australia, and many other countries. Failing contrast can lead to lawsuits. #### WCAG Contrast Ratio Standards: AA vs AAA WCAG 2.2 defines two compliance levels for text contrast: | Level | Normal Text | Large Text | Required For | | AA | 4.5:1 minimum | 3:1 minimum | Most legal requirements | | AAA | 7:1 minimum | 4.5:1 minimum | Highest standard, recommended | "Large text" is defined as at least 18pt (24px) bold or 24pt (32px) regular weight. Icons and UI components like form borders or checkboxes also need a 3:1 contrast ratio against their background under WCAG 2.2. #### How Contrast Ratio Is Calculated The contrast ratio is calculated using the relative luminance of two colors. Luminance is not the same as brightness — it's the perceived brightness of a color, weighted according to how the human eye responds to different wavelengths. The formula uses the sRGB color space and weights green the most (since our eyes are most sensitive to green light), red medium, and blue the least: Luminance = 0.2126 × R + 0.7152 × G + 0.0722 × B Where R, G, and B are gamma-corrected values from 0 to 1 (not the raw 0-255 values). The contrast ratio is then: (L1 + 0.05) / (L2 + 0.05) Where L1 is the lighter color's luminance and L2 is the darker one's. The 0.05 accounts for flare in real-world viewing conditions. #### What Counts as "Text" Under WCAG? Not every text element needs to meet the contrast standard. Here are the exceptions: - Logos: Text that is part of a logo or brand name has no contrast requirement. - Incidental text: Text in inactive UI components, or text that is purely decorative and not interacted with. - Placeholder text: Form field placeholders are exempt, but it's still good practice to make them readable. - Disabled controls: Buttons or inputs in a disabled state. That said, the exceptions are narrow. All body text, headings, navigation links, form labels, and button text must meet the minimum contrast. #### 5 Common Contrast Mistakes (and How to Fix Them) ##### 1. Low-contrast placeholder text Many designers use light gray placeholders that fail 4.5:1. While technically exempt, users with low vision can't read them. Fix: Use a medium gray with at least 3:1 contrast. ##### 2. Colored text on colored backgrounds Yellow text on white, or light blue on dark blue — both look fine in design software but fail in practice. Always check with a contrast checker. ##### 3. Text over images or gradients White text on a hero image might pass in the center but fail near light areas. Fix: Add a semi-transparent overlay or text shadow to ensure consistent contrast. ##### 4. Thin font at small sizes A 14px light font weight might technically pass 4.5:1 but still be hard to read. Consider AAA (7:1) for body text to add visual buffer. ##### 5. Disregarding color blindness Contrast ratio alone doesn't guarantee colorblind accessibility. Red-green combinations might have good contrast but be indistinguishable to 8% of men. Always check with a color blindness simulator. ⚠️ Don't rely on your eyes: What "looks readable" is often wrong. Human eyes adapt and compensate, so you can't judge contrast by eye alone. Always use a tool. #### How to Check Contrast on Your Website There are several ways to audit your site's contrast: - Our Color Contrast Checker : Paste your foreground and background hex codes. Instantly see if you pass AA and AAA, with WCAG 2.2 validation. - Browser DevTools: In Chrome DevTools, inspect any text element and look for the "Contrast" line in the color picker. It shows the ratio and pass/fail. - Lighthouse: Google's Lighthouse audit (in DevTools → Lighthouse tab) scans all text contrast on a page. - axe DevTools: A browser extension that does comprehensive accessibility audits, including contrast. #### The Difference Between WCAG 2.1 and 2.2 for Contrast WCAG 2.2 (published in October 2023) added one new success criterion related to visual appearance: 2.4.11 Focus Not Obscured (Minimum) at level AA. It requires that focus indicators aren't completely hidden by other content — not directly a contrast issue, but related to visibility. For contrast ratios specifically, WCAG 2.2 keeps the same AA and AAA thresholds as 2.0 and 2.1. The standards are stable; what changes is how we test for them and what UI elements they apply to. #### Practical Tips for Better Contrast - Design with contrast first, not last: Build your color palette to meet standards from the start, rather than fixing issues at the end. - Use 8-point tints and shades: A systematic palette (like Tailwind's 50-950 scale) ensures you always have accessible options. - Test both themes: If you have light and dark mode, test contrast for both — dark mode is not automatically more accessible. - Check edge cases: Error states, success messages, disabled buttons, and link colors all need contrast checks. #### Start Testing Now Ready to check if your colors are accessible? Use our free Color Contrast Checker — it takes two seconds, gives you instant WCAG 2.2 AA/AAA results, and even suggests adjustments if your colors fail. 🧰 Related Tools Color Contrast Checker — Test your colors against WCAG standards Palette Generator — Generate harmonious color schemes ##### Related Articles ###### Hex to RGB COLOR THEORY ###### What Is HSL Color? A Beginner's Guide to Hue, Saturation & Lightness COLOR THEORY ###### How Many Hex Colors Are There? (And Why It's Not Exactly 16 Million) COLOR BASICS ###### Best Color Palettes for SaaS Dashboards in 2026 DESIGN #### Related Articles 📖 Accessibility ###### Color Contrast & Accessibility Guide 📖 Accessibility ###### Accessible Color Palettes for Healthcare 📖 Design Tips ###### Dark Mode Color Schemes: Engineering Guide © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## Hex to RGB: The Complete Conversion Guide (With Examples) | HexColor Pro Blog URL: https://hexcolorpro.pages.dev/blog/hex-to-rgb-conversion-guide ### Hex to RGB: The Complete Conversion Guide (With Examples) Learn how to convert hex color codes to RGB manually or with a calculator. Includes formula, examples, and a free online converter tool. By Yao Xiangqian · Nov 8, 2026 · 1800 words · 8 min read #### What Is a Hex Color Code? A hex color code is a six-character (plus an optional two for alpha) representation of a color using the hexadecimal numbering system. It always starts with a # symbol followed by six characters from 0-9 and A-F . The six characters are split into three pairs: RR for red, GG for green, and BB for blue. Each pair represents a value from 0 to 255 — exactly matching RGB channels. For example, #FF0000 means full red (255), no green (0), and no blue (0) — pure red. 💡 Quick fact: Hex codes are case-insensitive. #FF0000 and #ff0000 are identical. Most designers use uppercase for readability. #### The Hex to RGB Formula Converting hex to RGB is straightforward once you know how base-16 works. Here's the step-by-step formula: - Take the six-digit hex code and remove the # - Split it into three pairs: first two = red, middle two = green, last two = blue - For each pair, convert the hexadecimal value to a decimal number from 0-255 The hex-to-decimal conversion works like this: each position represents 16 raised to a power. The left character is the "16s place" (16 1 ) and the right character is the "1s place" (16 0 ). For pair FF : F (15) × 16 + F (15) × 1 = 240 + 15 = 255 For pair 80 : 8 × 16 + 0 × 1 = 128 + 0 = 128 #### Example 1: Convert #2563EB to RGB Let's walk through a real example — the indigo blue used in many modern designs. | Component | Hex Pair | Calculation | Decimal Value | | Red | 25 | 2 × 16 + 5 = 37 | 37 | | Green | 63 | 6 × 16 + 3 = 99 | 99 | | Blue | EB | 14 × 16 + 11 = 235 | 235 | Result: rgb(37, 99, 235) — which is Tailwind's blue-600. #### Example 2: Convert #10B981 to RGB An emerald green, common in success states and fintech designs. | Component | Hex Pair | Calculation | Decimal Value | | Red | 10 | 1 × 16 + 0 = 16 | 16 | | Green | B9 | 11 × 16 + 9 = 185 | 185 | | Blue | 81 | 8 × 16 + 1 = 129 | 129 | Result: rgb(16, 185, 129) — the famous emerald-500. #### What About 3-Digit Hex Codes? You'll sometimes see shorthand hex codes like #F00 for red or #0AF for blue. These are valid in CSS and work by doubling each character. #F00 → #FF0000 → rgb(255, 0, 0) #0AF → #00AAFF → rgb(0, 170, 255) Shorthand hex only works when both characters in each pair are identical. It's mainly used for saving bytes in CSS. #### 8-Digit Hex: Adding Transparency Modern CSS supports 8-digit hex codes where the last two digits represent the alpha (transparency) channel. The same conversion applies: #FF000080 → red: FF (255), green: 00 (0), blue: 00 (0), alpha: 80 (128/255 ≈ 50% opacity) The alpha value 00 means fully transparent, and FF means fully opaque. This is equivalent to rgba(255, 0, 0, 0.5) . ⚠️ Browser support: 8-digit hex codes work in all modern browsers (Chrome 62+, Firefox 52+, Safari 10+). For older browser support, use rgba() instead. #### Fastest Way to Convert Hex to RGB Doing the math by hand is fine for understanding, but in practice you'll want a faster method. Here are three options: - Online converter tool: Use our Color Converter — paste your hex code and instantly get RGB, HSL, HSV, and CMYK values. - Browser DevTools: In Chrome DevTools, click any color swatch in the Styles panel to toggle between hex, rgb, and hsl formats. - Design software: Figma, Sketch, and Photoshop all show hex and RGB side by side in the color picker. #### Common Mistakes to Avoid - Confusing the pair order: Hex is always RR-GG-BB, never any other order. - Forgetting case insensitivity: #abcdef and #ABCDEF are the same color. - Adding spaces: Hex codes have no spaces. #FF 00 00 is invalid. - Using 4-digit hex for opacity: #F008 = 50% red, but only works if you know the shorthand rule. #### Next Steps Now that you understand hex to RGB conversion, you might want to explore other color models. Head over to our Color Converter to try converting between 7 different color formats instantly. 🧰 Related Tools Color Converter — Convert between 8+ color formats Color Shades Generator — Create tint and shade scales ##### Related Articles ###### WCAG Contrast Ratio Explained ACCESSIBILITY ###### What Is HSL Color? A Beginner's Guide to Hue, Saturation & Lightness COLOR THEORY ###### How Many Hex Colors Are There? (And Why It's Not Exactly 16 Million) COLOR BASICS ###### Best Color Palettes for SaaS Dashboards in 2026 DESIGN #### Related Articles 📖 Color Basics ###### What Color Is #FF0000? Understanding Hex Codes 📖 Color Theory ###### What Is HSL Color? A Developer's Guide 📖 Color Theory ###### CMYK vs RGB: Why Colors Look Different © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## What Is HSL Color? A Beginner's Guide to Hue, Saturation & Lightness | HexColor Pro Blog URL: https://hexcolorpro.pages.dev/blog/what-is-hsl-color ### What Is HSL Color? A Beginner's Guide to Hue, Saturation & Lightness Understand the HSL color model, how it differs from RGB and HEX, and why designers love it for creating consistent color systems. By Yao Xiangqian · Nov 8, 2026 · 1700 words · 8 min read #### What Does HSL Stand For? HSL stands for Hue, Saturation, and Lightness . It's a color model that describes colors in a way that's much more intuitive for humans than RGB or hex codes. While RGB describes a color as "how much red, green, and blue light," HSL describes it as "what color, how vivid, and how bright." It's a cylindrical representation where each dimension maps to something you can name. #### The Three Components of HSL ##### Hue (0° – 360°) Hue is the base color, represented as an angle on the color wheel. 0° is red, 120° is green, 240° is blue, and 360° wraps back to red. Every number in between is a different hue — 30° is orange, 270° is purple, 180° is cyan, and so on. Because hue is circular, 350° and 10° are neighbors (both red-ish), even though numerically they're far apart. This is what makes HSL so useful for creating harmonious palettes. ##### Saturation (0% – 100%) Saturation is how "colorful" or vivid the color is. 0% saturation gives you pure gray — no color at all. 100% is the most intense, fully saturated version of that hue. Everything in between is progressively more muted. Designers often work in the 30-70% saturation range for UI elements. Fully saturated colors (100%) can be harsh on the eyes and difficult to pair with others. ##### Lightness (0% – 100%) Lightness is how bright the color is. 0% lightness is always black, regardless of hue or saturation. 100% is always white. 50% is the "pure" color — neither darkened nor lightened. Wait — if lightness is 50%, is the color always the same brightness? Not exactly. A 50% lightness yellow looks brighter than a 50% lightness blue because our eyes perceive yellow as brighter. Lightness is a mathematical property, not a perceptual one. (If you want perceptual lightness, look into the LCH color model.) 🎯 Pro tip: Want to make a color darker or lighter but keep the exact same hue? Just adjust the L value. That's why HSL is perfect for creating tint/shade scales — you don't have to recalculate anything. #### HSL vs RGB vs Hex: Which Should You Use? | Model | Best For | Example | Human Readable? | | Hex | Copy-pasting, CSS | #6366f1 | No | | RGB | Screen rendering | rgb(99, 102, 241) | No | | HSL | Design, palettes, systems | hsl(239, 84%, 67%) | Yes | | HSL / HSV | Artistic control | hsv(239, 59%, 95%) | Yes | For day-to-day web work, most designers use hex codes in their CSS but think in HSL when building palettes. Modern CSS lets you use any format — and HSL custom properties are increasingly popular for design systems. #### Why Designers Love HSL ##### 1. It makes palettes trivial Want a monochromatic palette? Keep H and S constant, vary L from 10% to 90%. Want analogous colors? Keep S and L constant, rotate H by ±30°. Want complementary? Add 180° to H. It's that simple. ##### 2. It's the easiest way to tweak brightness In hex or RGB, making a color 10% darker involves recalculating all three channels. In HSL, you just subtract 10 from L. Done. ##### 3. It maps to how we talk about color When someone says "that blue is too bright," they're talking about lightness. "Make it less intense" means lower saturation. "Shift it toward teal" means adjust hue. HSL aligns with natural language in a way RGB never will. #### How to Convert HSL to RGB While you'll usually use a tool for this, it's useful to understand the math. The HSL to RGB conversion is more complex than hex↔RGB because it involves trigonometric-looking steps: - If saturation is 0%, the color is gray — R, G, B all equal lightness. - Otherwise, calculate temporary values based on lightness and saturation. - For each of R, G, B, determine which sector of the hue wheel it's in and compute accordingly. The full algorithm is a bit lengthy to show here. Unless you're writing a color library, just use our Color Converter — it does HSL ↔ RGB ↔ hex and 6 other formats instantly. #### HSL in CSS: Practical Examples HSL works in all modern browsers and is great for design systems with CSS variables: ``` :root { --brand-h: 239; --brand-s: 84%; --brand-l: 67%; --brand: hsl(var(--brand-h) var(--brand-s) var(--brand-l)); --brand-dark: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 15%)); --brand-light: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 15%)); } ``` With this setup, changing your entire brand color is as simple as changing one number ( --brand-h ). All the light and dark variants update automatically. #### HSV vs HSL: What's the Difference? You'll also see HSV (Hue, Saturation, Value) in design tools. They're similar but not identical: - HSL's "lightness" 100% = white , 0% = black, 50% = pure color - HSV's "value" 100% = pure color , 0% = black. White is achieved by lowering saturation to 0%. - HSV is what Photoshop, Figma, and most design tools use in their color pickers. - HSL is what CSS supports natively. 💡 Confused yet? Don't worry — you rarely need to think about the difference. Our Color Converter shows you HSL, HSV, RGB, hex, and more all on one screen. #### Start Experimenting The best way to understand HSL is to play with it. Open our Color Picker , switch to HSL mode, and drag the sliders around. Notice how hue rotates the color wheel, saturation controls intensity, and lightness slides from black to white. 🧰 Related Tools Color Converter — Convert between 8+ color formats Color Shades Generator — Create tint and shade scales ##### Related Articles ###### Hex to RGB COLOR THEORY ###### WCAG Contrast Ratio Explained ACCESSIBILITY ###### How Many Hex Colors Are There? (And Why It's Not Exactly 16 Million) COLOR BASICS ###### Best Color Palettes for SaaS Dashboards in 2026 DESIGN #### Related Articles 📖 Color Basics ###### Hex to RGB: Complete Conversion Guide 📖 Color Theory ###### Color Theory Basics 📖 Design Tips ###### Monochromatic Color Palette Generator Guide © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## How Many Hex Colors Are There? (And Why It's Not Exactly 16 Million) | HexColor Pro Blog URL: https://hexcolorpro.pages.dev/blog/how-many-hex-colors-are-there ### How Many Hex Colors Are There? (And Why It's Not Exactly 16 Million) The real answer to how many hex color codes exist, including transparency channels, named colors, and the human eye's real perception limit. By Yao Xiangqian · Nov 8, 2026 · 1500 words · 8 min read #### The Short Answer There are 16,777,216 possible hex color codes in the standard 6-digit format. That's 256 shades of red × 256 shades of green × 256 shades of blue = 256³ = 16,777,216 unique combinations. But the full answer is more interesting than that. Let's break it down. #### Where 16.7 Million Comes From A 6-digit hex code represents 3 bytes of data — one byte each for red, green, and blue. One byte = 8 bits = 256 possible values (0-255). | Channel | Hex Range | Decimal Range | Values | | Red (RR) | 00 – FF | 0 – 255 | 256 | | Green (GG) | 00 – FF | 0 – 255 | 256 | | Blue (BB) | 00 – FF | 0 – 255 | 256 | | Total | | 16,777,216 | 256 × 256 × 256 = 2 24 = 16,777,216. This is also called "24-bit color" or "True Color." #### What About 8-Digit Hex? 4.3 Billion More With 8-digit hex codes (which add an alpha/transparency channel), you get one more byte: 256 × 256 × 256 × 256 = 2 32 = 4,294,967,296 possible combinations That's over 4 billion — roughly half the population of Earth. But most of those are just different transparency levels of the same 16.7 million colors. So it's technically correct but a bit misleading to say "4 billion colors." #### 3-Digit Hex: Only 4,096 Colors The shorthand 3-digit format ( #RGB ) has far fewer: 16 × 16 × 16 = 16³ = 4,096 colors That's because each digit can only be 0-F (16 values) instead of two digits (256 values). 4,096 colors was the standard for "high color" displays in the early 2000s. Today it's mainly used for CSS brevity. 🤓 Nerd fact: Named web colors? There are only 140 of them defined in the CSS color specification. That's 140 out of 16.7 million — 0.0008%. The vast majority of hex colors have no name at all. #### But How Many Colors Can Humans Actually See? Here's where it gets philosophical. 16.7 million sounds like a lot, but can we actually tell them all apart? The answer depends on who you ask and how you measure. Most studies put the number of distinguishable colors between: - ~1 million — conservative estimate for color differences under ideal conditions - ~10 million — more commonly cited figure for total distinguishable colors - Up to 100 million — claimed by some studies for people with tetrachromacy (4 cone types instead of 3) So 16.7 million is probably more than most people can distinguish — but not by as much as you might think. And there are definitely many real-world colors that 8-bit sRGB can't represent accurately. #### Why 16.7 Million Isn't Enough You might think 16.7 million colors is overkill. It's not. Here's why: ##### Smooth gradients need them A gradient from dark blue to light blue across a 1920-pixel-wide screen needs ~1920 distinct shades to look smooth. With only 256 shades per channel, you can start to see visible banding in gradients — especially in dark areas where our eyes are more sensitive to differences. ##### Color correction and editing When you adjust brightness, contrast, or apply filters, you're stretching and compressing the available color values. Starting with only 256 levels per channel means you'll see posterization (banding) after just a couple of adjustments. That's why professional photo editing uses 16-bit per channel (65,536 levels) or even 32-bit floating point. ##### Gamut limitations sRGB (what hex codes describe) only covers about 35% of visible colors. Wider gamuts like Display P3 or Rec. 2020 can show more vivid colors that hex/sRGB literally cannot represent. That's why modern devices are moving to P3 displays and CSS color(display-p3 ...) syntax. #### Hex Colors in Practice Even though 16.7 million sounds vast, designers and developers end up using a surprisingly small subset. A typical app or website might use only 50-200 distinct colors across its entire design system. The rest of the 16.7 million are unused — but having them available means you always have the exact shade you need. Want to explore the space? Our Color Picker lets you click anywhere on the full 16.7 million color spectrum and instantly get the hex code. #### Fun Hex Color Facts - #000000 (black) and #FFFFFF (white) are the most commonly used hex colors in CSS — no surprise. - The most "average" color — #808080 — is literally middle gray in every channel. - In hexadecimal, A=10, B=11, C=12, D=13, E=14, F=15. That's why FF = 255 (15×16+15). - "Hex" comes from the Greek word "hexa" meaning six — referring to the six characters in a standard hex color code. #### Wrapping Up So how many hex colors are there? 16,777,216 for standard 6-digit codes, plus a lot more if you count alpha. But the real answer is: enough for everyday web design, but not enough for everything. The future is wider color gamuts and higher bit depths — but hex isn't going anywhere anytime soon. 🧰 Related Tools Color Converter — Convert between 8+ color formats Color Shades Generator — Create tint and shade scales ##### Related Articles ###### Hex to RGB COLOR THEORY ###### WCAG Contrast Ratio Explained ACCESSIBILITY ###### What Is HSL Color? A Beginner's Guide to Hue, Saturation & Lightness COLOR THEORY ###### Best Color Palettes for SaaS Dashboards in 2026 DESIGN #### Related Articles 📖 Color Basics ###### What Color Is #FF0000? Understanding Hex Codes 📖 Color Basics ###### Hex to RGB: Complete Conversion Guide 📖 Color Theory ###### Color Theory Basics © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## What Color Is #FF0000? Understanding Hex Color Codes | HexColor Pro Blog URL: https://hexcolorpro.pages.dev/blog/what-color-is-ff0000 ### What Color Is #FF0000? Understanding Hex Color Codes Deep dive into the world's most famous hex code. Learn how hex colors work, the structure of a hex code, and why red is FF0000. By Yao Xiangqian · Nov 8, 2026 · 1600 words · 8 min read #### The Quick Answer #FF0000 is pure red . It's the brightest, most saturated red you can display in a standard hex color code — 255 red, 0 green, 0 blue. You've seen it a million times. But have you ever stopped to wonder why it's "FF" and not something else? Or why it's the most famous hex code in the world? #### Breaking Down #FF0000 Every 6-digit hex color code follows the format #RRGGBB — two characters for red, two for green, two for blue. Let's split #FF0000 apart: | Channel | Hex Value | Decimal Value | Meaning | | Red (RR) | FF | 255 | Maximum red | | Green (GG) | 00 | 0 | No green | | Blue (BB) | 00 | 0 | No blue | FF in hexadecimal equals 255 in decimal. That's the maximum value a single byte can hold — which is why it's the "fullest" red possible in 24-bit color. #### Why Hexadecimal? Why Not Decimal? You might be wondering why we use hex at all. Why not just write rgb(255, 0, 0) and be done with it? There are a few historical and practical reasons: - Compact: 6 characters vs "rgb(255, 0, 0)" — shorter is better when you're writing thousands of colors in CSS. - Binary-friendly: Each hex digit = 4 bits. Two digits = 8 bits = 1 byte. It's a perfect fit for how computers store color data. - Early web tradition: Hex colors were used in the first versions of HTML and CSS, and the tradition stuck. - Copy-paste friendly: It's a single token — no commas, no spaces, no function syntax. 💡 Conversion trick: To convert a hex pair to decimal in your head: first digit × 16 + second digit. For FF: 15 × 16 + 15 = 255. That's it. #### Shades of #FF0000 Pure red is bright — sometimes too bright. Here's a scale of reds going from pure red down to near-black, all just different lightness levels of the same hue: | Hex | RGB | Name / Description | | #FF6666 | 255, 102, 102 | Light red / coral red | | #FF3333 | 255, 51, 51 | Bright red | | #FF0000 | 255, 0, 0 | Pure red (the classic) | | #CC0000 | 204, 0, 0 | Dark red / ruby | | #990000 | 153, 0, 0 | Deep red / burgundy | | #660000 | 102, 0, 0 | Very dark red / maroon | | #330000 | 51, 0, 0 | Nearly black red | Want to generate your own scale? Use our Color Shades Generator — just paste #FF0000 and you get 10 shades instantly. #### The History of Red in Digital Design Red has always been special in computing. Here's why: ##### The first color displays Early computers didn't have color at all — they had monochrome displays, usually green or amber phosphor. When color arrived in the 1970s and 80s, it often came in the form of RGB monitors — and red was always the "first" channel. ##### HTML and the birth of the web In the early web (HTML 3.2, 1997), you could use 16 named colors. Red was one of them. The hex code #FF0000 was everywhere — links, error messages, emphasis. It was the web's first "attention" color. ##### Red in UI design today Red still means "stop," "error," "danger," and "delete" in almost every interface. It's the most emotionally intense color — which is why you should use it sparingly. Too much red causes stress and alarm fatigue. #### What Makes #FF0000 Special - It's one of the 16 original named web colors (just red in CSS). - It has the shortest 3-digit hex shorthand: #F00 (double each digit → #FF0000). - It's the purest primary color in the RGB model — no mixing of other channels. - It's used in everything from stop signs to error messages to YouTube's logo. - Red is the first color babies can see (after black and white). #### Colors That Go With #FF0000 Pure red is powerful and hard to pair. Here are 5 color schemes that work: ##### 1. Classic Red + Black Red on black. Think Ferrari, Coca-Cola, or a deck of cards. High contrast, bold, classic. But use sparingly — it can feel aggressive. ##### 2. Red + Cream Red with warm off-white ( #FFF8E7 ). Softer than red on white, feels vintage and premium. Great for editorial and fashion. ##### 3. Red + Navy Red with deep navy blue ( #0F2B5B ). Nautical, patriotic, trustworthy. The classic Americana palette. ##### 4. Red + Teal Red with teal ( #14B8A6 ). Modern and bold — complementary colors that pop without being cliché. Popular in startup branding. ##### 5. Red + Gray Scale Red on a neutral gray background. The safe choice for dashboards and apps. Red signals errors and alerts; everything else is gray. ⚠️ Accessibility warning: Pure red (#FF0000) on white has a contrast ratio of only 3.99:1 — below the WCAG AA standard of 4.5:1 for body text. Use a darker red like #CC0000 or #D32F2F for text. #### Red Around the World Red carries different cultural meanings — something to consider if you're designing for a global audience: - China & East Asia: Red is lucky, prosperous, and celebratory. It's the color of Chinese New Year and weddings. - Western cultures: Red means danger, stop, love, and passion. It's also associated with communism and revolution. - India: Red represents purity, marriage, and fertility. Brides traditionally wear red. - South Africa: Red is associated with mourning. #### Explore More Colors Now that you know everything about #FF0000, why not explore the other 16,777,215 colors? Use our Color Picker to find the perfect shade, or the Color Converter to translate between hex, RGB, HSL, and more. 🧰 Related Tools Color Contrast Checker — Test your colors against WCAG standards Color Converter — Convert between 8+ color formats ##### Related Articles ###### Hex to RGB COLOR THEORY ###### WCAG Contrast Ratio Explained ACCESSIBILITY ###### What Is HSL Color? A Beginner's Guide to Hue, Saturation & Lightness COLOR THEORY ###### How Many Hex Colors Are There? (And Why It's Not Exactly 16 Million) COLOR BASICS #### Related Articles 📖 Color Basics ###### Hex to RGB: Complete Conversion Guide 📖 Color Basics ###### How Many Hex Colors Are There? 📖 Color Theory ###### Color Theory Basics © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## CMYK to RGB: Why Colors Look Different on Screen vs Print | HexColor Pro Blog URL: https://hexcolorpro.pages.dev/blog/cmyk-to-rgb-difference ### CMYK to RGB: Why Colors Look Different on Screen vs Print Understand the difference between additive and subtractive color, why printed colors never match screens, and how to convert CMYK to RGB correctly. By Yao Xiangqian · Nov 8, 2026 · 1700 words · 8 min read #### Why CMYK and RGB Are Different Have you ever designed something on screen that looked perfect, then printed it and thought — "why does this look so dull and different?" You're not imagining it. Screen colors and printed colors are fundamentally different things, and understanding why will save you a lot of frustration. The core difference comes down to additive vs subtractive color mixing — two completely different physical processes that produce color in opposite ways. #### RGB: Additive Color (Light) RGB (Red, Green, Blue) is how screens produce color. It's called "additive" because you start with black (no light) and add colored light on top of it. - Add all three colors at full intensity → white - No light at all → black - Different combinations make the 16.7 million colors we see on screen Every screen — your phone, monitor, TV, even smartwatch — uses tiny red, green, and blue subpixels that emit light. When you look at a screen, you're looking directly at light sources. #### CMYK: Subtractive Color (Ink) CMYK (Cyan, Magenta, Yellow, Key/Black) is how printing produces color. It's called "subtractive" because you start with white (the paper) and subtract light by printing ink on top of it. - Ink absorbs (subtracts) certain wavelengths of light - The light that isn't absorbed bounces back to your eye — that's the color you see - Cyan ink absorbs red light, magenta absorbs green, yellow absorbs blue - Add all three and you should get black — but in practice you get a muddy brown, so printers add a pure black ink (the K in CMYK) When you look at a printed page, you're looking at reflected ambient light — not a light source itself. 💡 Why K for black? Because B already means Blue in RGB, so the printing industry uses K for "Key plate" — the black plate that adds detail and contrast. It's also sometimes said to stand for the last letter of "blacK." #### The Gamut Problem: Why They Never Match "Gamut" is the range of colors a system can produce. RGB and CMYK have different gamuts — they overlap, but neither fits entirely inside the other. Key differences: - RGB can produce vibrant colors CMYK can't: Bright, saturated colors — especially electric blues, neon greens, and vivid oranges — often look washed out when printed. - CMYK can produce some colors RGB can't: Certain deep blues, rich browns, and muted pastels fall outside sRGB but are achievable with ink. - Neither covers all visible colors: Both sRGB and CMYK are subsets of what the human eye can see. #### How to Convert CMYK to RGB There's no perfect formula because of the gamut differences and the many variables in printing (paper type, ink type, press quality). But there's a standard mathematical conversion that gives you a starting point: ##### The Standard Conversion Formula Given C, M, Y, K values (each 0-1 or 0-100%): - Convert percentages to 0-1 range (divide by 100) - Calculate each RGB channel as: channel = 255 × (1 - c) × (1 - k) - Where c is the CMY component for that channel (e.g., C affects R, M affects G, Y affects B) More precisely: R = 255 × (1 - C/100) × (1 - K/100) G = 255 × (1 - M/100) × (1 - K/100) B = 255 × (1 - Y/100) × (1 - K/100) ##### Example: Converting a Deep Blue CMYK: C=100, M=80, Y=0, K=30 | Channel | Calculation | Value | | Red | 255 × (1 - 1) × (1 - 0.3) = 255 × 0 × 0.7 | 0 | | Green | 255 × (1 - 0.8) × (1 - 0.3) = 255 × 0.2 × 0.7 | ≈ 36 | | Blue | 255 × (1 - 0) × (1 - 0.3) = 255 × 1 × 0.7 | ≈ 179 | Result: rgb(0, 36, 179) or #0024B3 But remember — this is just a mathematical approximation. The actual printed color will look different depending on the printer, paper, and viewing conditions. #### Why Your Prints Look Dull (And How to Fix It) The #1 complaint from designers: "my prints look nothing like my screen." Here are the most common reasons and what to do about them: ##### 1. Your screen is too bright Most monitors are set to 100% brightness out of the box, which is way too bright for design work. A properly calibrated monitor should be at 120 cd/m² — roughly the brightness of paper under office lighting. ##### 2. You're using sRGB for print sRGB is the standard web color space and it's smaller than print gamut in some areas but larger in others. For print work, design in Adobe RGB or the specific CMYK profile of your printer (SWOP, FOGRA, etc.). ##### 3. No color management Design software like Photoshop, Figma, and InDesign support color profiles. Use them. Set your document's color profile to match your printer's output profile — don't just trust the RGB preview. ##### 4. Paper matters more than you think The same CMYK values look completely different on glossy photo paper vs matte vs newsprint. Glossy paper gives deeper blacks and more saturated colors. Newsprint absorbs ink and makes everything look muted. ⚠️ Proof before you print: Always ask for a printed proof before a large print run. Digital soft proofs (on-screen CMYK previews) help, but nothing beats seeing the actual ink on actual paper. #### When to Use Which Format | Use RGB / Hex When... | Use CMYK When... | | Websites and web apps | Business cards and brochures | | Social media graphics | Magazine and newspaper ads | | Video and animation | Packaging and labels | | Digital presentations | Billboards and large format prints | | Email design | Books and book covers | | Anything shown on a screen | Anything printed on physical material | #### Spot Colors: When CMYK Isn't Enough Sometimes you need an exact color that CMYK can't reproduce — like a specific brand red or a metallic gold. That's where spot colors (like Pantone colors) come in. Spot colors are pre-mixed inks that print as a single color, rather than being mixed from CMYK halftone dots. They're more expensive (each spot color is a separate plate on the press) but give you exact, consistent color across different print runs and materials. Most brands specify their primary logo color as a Pantone spot color, then provide CMYK and RGB approximations for other uses. #### Quick Tool for Conversions Need to convert CMYK to RGB (or any other color format)? Our Color Converter handles 8+ formats including CMYK, RGB, hex, HSL, HSV, and more. Paste any value and get all conversions instantly. 🧰 Related Tools Color Converter — Convert between 8+ color formats Color Shades Generator — Create tint and shade scales ##### Related Articles ###### Hex to RGB COLOR THEORY ###### WCAG Contrast Ratio Explained ACCESSIBILITY ###### What Is HSL Color? A Beginner's Guide to Hue, Saturation & Lightness COLOR THEORY ###### How Many Hex Colors Are There? (And Why It's Not Exactly 16 Million) COLOR BASICS #### Related Articles 📖 Color Basics ###### Hex to RGB: Complete Conversion Guide 📖 Color Theory ###### What Is HSL Color? A Developer's Guide 📖 Color Theory ###### Color Theory Basics © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## The Complete Guide to Color Contrast & Accessibility | HexColor Pro Blog URL: https://hexcolorpro.pages.dev/blog/contrast-accessibility-guide ### The Complete Guide to Color Contrast & Accessibility WCAG standards explained, plus how to measure contrast and avoid common mistakes. By Yao Xiangqian · Nov 7, 2026 · 10 min read Accessible color design isn't just a nice-to-have — it's essential for creating products that work for everyone. About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Many more have low vision or read their phones in bright sunlight. Good contrast ensures your content is readable by all. In this guide, we'll break down the WCAG standards, explain how contrast ratios work, and give you practical tips for designing accessible color schemes. #### What is Contrast Ratio? Contrast ratio measures the difference in luminance (brightness) between two colors, typically text and its background. The ratio ranges from 1:1 (same color, zero contrast) to 21:1 (pure white on pure black). It's calculated using a formula based on relative luminance — how bright a color appears to the human eye. Green contributes most to perceived brightness, blue the least, which is why blue text on black can be hard to read even though the hue difference seems obvious. #### WCAG Standards at a Glance The Web Content Accessibility Guidelines (WCAG) define two levels of contrast compliance: | Element | AA (minimum) | AAA (enhanced) | | Normal text | 4.5:1 | 7:1 | | Large text (18pt+ / 14pt bold) | 3:1 | 4.5:1 | | UI components & graphics | 3:1 | — | 💡 What's "large text"? In WCAG terms, large text is 18pt (24px) or larger, or 14pt (18.66px) and bold. Most body text falls under the "normal text" category and needs 4.5:1 minimum. ##### Why Aim for AA vs AAA? WCAG AA is the legal baseline in many regions (EU's EN 301 549, US Section 508, Canada's AODA). AAA is a higher standard that's harder to meet — many brand colors simply can't reach 7:1 on white. For most products, AA compliance is the practical target, with AAA as a stretch goal for body text where possible. #### Common Accessibility Mistakes ##### 1. Light Gray Text on White This is the #1 culprit. Designers love "subtle" gray text for secondary info, but #999 on white is only about 2.8:1 — well below the 4.5:1 minimum. If you must use light gray, make sure it's truly decorative or non-essential. For important secondary text, use a darker gray like #666 or #555. ##### 2. Color as the Only Indicator "The red button is delete, the green one is save" — that's a problem for color-blind users. Always pair color with another cue: iconography, text labels, patterns, or position. Error states should have an icon and message, not just a red border. ⚠️ Common mistake: Form validation that only shows a red border on error fields. Add an error icon or message too. ##### 3. Low-Contrast Hover States Buttons look fine in their default state but the hover/active state drops contrast. Always test all interactive states — default, hover, active, focus, disabled — for contrast. ##### 4. Pure White Text on Bright Colors White text on bright colors like #6366f1 (indigo) looks great but might fall short. Let's check: white (#ffffff) on indigo (#6366f1) has a contrast ratio of about 4.0:1 — close but below 4.5:1 for body text. For buttons and headlines (large text), it passes AA at 3:1. Just be aware of the distinction. #### How to Check Contrast There are several easy ways to test contrast ratios: - Use our Contrast Checker — plug in any two colors and get an instant WCAG pass/fail result - Browser DevTools — in Chrome DevTools, inspect text elements and the color picker shows contrast ratio - Extensions — tools like axe DevTools or Wave can scan whole pages for contrast issues - Grayscale test — convert your design to black and white. If it's hard to read in grayscale, the contrast is too low 🎯 Quick check: If you squint and can still read the text comfortably, the contrast is probably good. If you have to strain, it's too low. #### Designing Accessible Color Palettes ##### Start with Value Contrast Here's a trick: design your palette in grayscale first. Get the value relationships right — dark enough text, light enough backgrounds, clear hierarchy — then add color on top. If your design works in grayscale, it will pass contrast checks and be readable by everyone. ##### Use Darker Shades for Text Your brand color might be a bright blue, but that doesn't mean text needs to be the same blue. Create a darker version of your brand color specifically for text links. It will still read as "your brand" but will be much more readable. ##### Test with Real Content Contrast tools test pure color swatches against each other. Real-world factors like font rendering, anti-aliasing, and font weight affect readability too. Always test with actual text at actual sizes on actual screens. ##### Consider Color Blindness Contrast ratio is about luminance, not color difference, so it already helps with many forms of color blindness. But you should also check that color-coded information doesn't rely on hue alone. Use tools like Coblis or Color Safe to simulate how your design looks to people with different types of color vision deficiency. #### Accessible Dark Mode Dark mode has its own accessibility challenges. Pure black (#000000) backgrounds with pure white (#ffffff) text have maximum contrast (21:1) but can cause eye strain and halation for some users, especially at night. A better approach: - Use a dark gray like #0f172a or #18181b instead of pure black - Use off-white text like #e2e8f0 instead of #ffffff - Make sure body text still meets 4.5:1 (it will — #e2e8f0 on #0f172a is about 14:1) - Reduce the number of saturated accent colors — they vibrate more on dark backgrounds #### The Business Case for Accessibility Beyond the ethical and legal reasons, accessible design is just good design. Better contrast means your content is more readable in all conditions — bright sunlight, low-quality screens, old monitors, glanceable moments. Designing for the edges improves the experience for everyone. Ready to check your colors? Use our Color Contrast Checker to test any pair against WCAG standards. ##### Related Articles ###### Color Theory Basics Every Designer Should Know Color Theory · 8 min ###### Dark Mode Color Design: Best Practices & Pitfalls Dark Mode · 7 min #### Related Articles 📖 Accessibility ###### WCAG Contrast Ratio: How to Calculate & Pass 📖 Accessibility ###### Accessible Color Palettes for Healthcare 📖 Design Tips ###### Dark Mode Color Schemes: Engineering Guide © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## Color Theory Basics Every Designer Should Know | HexColor Pro Blog URL: https://hexcolorpro.pages.dev/blog/color-theory-basics ### Color Theory Basics Every Designer Should Know Master the fundamentals of color — from the wheel to harmony schemes — and start creating with confidence. By Yao Xiangqian · Nov 7, 2026 · 8 min read Color is one of the most powerful tools in design. It can set a mood, guide attention, and communicate ideas without a single word. But using color well isn't just about having good taste — it's about understanding the principles behind why some color combinations feel right and others feel wrong. In this guide, we'll cover the foundational concepts every designer should know. By the end, you'll understand the color wheel, the three properties of color, and how to use classic color schemes to create harmonious designs. #### The Three Properties of Color Every color has three defining characteristics — hue, saturation, and value. Understanding these is like learning the alphabet before you write sentences. ##### 1. Hue Hue is what most people mean when they say "color." It's the position on the color wheel — red, blue, green, yellow, etc. Pure hues are the most vibrant, undiluted versions of a color. When designers talk about "working with the hue," they mean changing the actual color family, not just making it lighter or darker. ##### 2. Saturation Saturation is how intense or pure a color is. A fully saturated color is vivid and bright — think traffic cone orange. Desaturate it, and it becomes grayish and muted. Desaturated colors feel calm, sophisticated, and natural. Highly saturated colors feel energetic, playful, and grab attention fast. 💡 Pro Tip: Most designs benefit from mostly desaturated colors with one or two highly saturated accent colors for emphasis. This creates visual hierarchy naturally. ##### 3. Value (Lightness) Value is how light or dark a color is. If you take a photo and convert it to black and white, what you see are the values. Value is the most important property for readability and contrast. A design with good value structure works even in grayscale — that's a great test to run on your work. #### The Color Wheel The color wheel organizes hues in a circle, showing how they relate to each other. It's the foundation of color theory. Here's how it breaks down: - Primary colors — Red, Yellow, Blue (RYB model) or Red, Green, Blue (RGB model for screens). These can't be created by mixing other colors. - Secondary colors — Orange, Green, Violet. Created by mixing two primaries. - Tertiary colors — Red-orange, Yellow-orange, Yellow-green, Blue-green, Blue-violet, Red-violet. Mix a primary with a neighboring secondary. For digital design work, the RGB model is most relevant. But the relationships on the wheel — complementary, analogous, etc. — apply regardless of the color model. #### Classic Color Harmony Schemes Color harmony is about combining colors in a way that feels pleasing and balanced. Designers have developed proven schemes based on the color wheel. Here are the six most useful ones: ##### Analogous Analogous colors sit next to each other on the wheel — think blue, teal, and green. They create a natural, harmonious feel with low contrast. Great for backgrounds, branding, and anything that needs to feel cohesive and calm. #0EA5E9 #06B6D4 #14B8A6 #10B981 #22C55E ##### Complementary Complementary colors are opposite each other on the wheel — red & green, blue & orange, purple & yellow. They create maximum contrast and energy. Use them carefully — too much can feel jarring. They work best when one color dominates and the other is used sparingly for highlights or CTAs. ##### Triadic Three colors evenly spaced (120° apart) around the wheel. The primary colors (red, yellow, blue) are a classic triadic scheme. Triadic palettes are vibrant and balanced, but they can feel childish if not tamed with value and saturation adjustments. ##### Monochromatic Different values and saturations of a single hue. Elegant, minimalist, and basically foolproof — you can't really mess it up. Perfect for portfolios, luxury brands, and clean modern designs. The key is having enough value contrast to create visual interest. ##### Split Complementary A base color plus the two colors adjacent to its complement. Less intense than straight complementary but still has good pop. It's a sophisticated middle ground that gives you variety without the tension of direct opposites. ##### Tetradic (Double Complementary) Four colors arranged as two complementary pairs. The richest scheme with the most variety, but also the hardest to balance. Rule of thumb: pick one color to be dominant, and use the rest as accents. #### The 60-30-10 Rule When applying your color palette to a design, the 60-30-10 rule is a classic guideline: - 60% — Dominant color (backgrounds, large areas) - 30% — Secondary color (sidebars, cards, secondary elements) - 10% — Accent color (buttons, links, highlights) This ratio ensures balance and prevents your design from feeling chaotic. It's not a hard rule, but it's a great starting point, especially for beginners. 🎨 Try it: Head over to our Color Scheme Generator and plug in your brand color. You'll get all six harmony schemes instantly — a great way to explore what works. #### Warm vs. Cool Colors The color wheel can be split into warm and cool halves. Warm colors (red, orange, yellow) feel energetic, passionate, and attention-grabbing. Cool colors (blue, green, purple) feel calm, trustworthy, and peaceful. Most successful designs have a temperature bias — they're mostly warm or mostly cool — with a few accents from the other side for contrast. This creates balance without chaos. #### Putting It Into Practice The best way to learn color theory is to use it. Here's a simple exercise: - Pick a single color you like as your base - Generate all six harmony schemes from it - For each scheme, create a quick mockup of a simple page (header, body, button) - Notice how each scheme changes the mood and feel Over time, you'll develop an intuition for which schemes work for which purposes. But the theory will always be there as your foundation — especially when you're stuck and need a place to start. Want to dive deeper? Check out our step-by-step guide to choosing website color palettes or learn about color psychology for branding . ##### Related Articles ###### The Complete Guide to Color Contrast & Accessibility Accessibility · 10 min ###### How to Choose a Perfect Color Palette for Your Website Design Tips · 11 min #### Related Articles 📖 Color Theory ###### What Is HSL Color? A Developer's Guide 📖 Color Theory ###### Color Psychology in Branding 📖 Design Tips ###### Web Color Palette Guide © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## How to Choose a Perfect Color Palette for Your Website | HexColor Pro Blog URL: https://hexcolorpro.pages.dev/blog/web-color-palette-guide ### How to Choose a Perfect Color Palette for Your Website A step-by-step framework for creating beautiful, on-brand, high-converting color schemes. By Yao Xiangqian · Nov 7, 2026 · 11 min read Choosing the right color palette is one of the most impactful decisions in web design. Colors set the mood, convey your brand personality, and even influence whether visitors take action. But with millions of colors to choose from, where do you start? This guide walks you through a proven, step-by-step process for creating a website color palette that looks great, works for your brand, and converts visitors. #### 1 Start with Your Brand & Audience Before you open any color picker, answer these questions: - What's your brand personality? Playful? Serious? Luxurious? Friendly? - Who's your audience? Young? Professional? Niche hobbyists? - What action do you want visitors to take? Buy? Sign up? Read? A kids' toy store and a law firm should not have the same color palette — even if you personally love both styles. Let the brand and audience guide you, not your personal taste. #### 2 Pick a Primary Color Your primary color is the most recognizable color of your brand — the one people associate with you. It should appear in your logo, buttons, and key interactive elements. Here's a quick guide to common primary color associations: - Blue — trust, stability, professionalism (most common for tech and finance) - Red — energy, passion, urgency (great for CTAs and food) - Green — nature, growth, health (perfect for eco and wellness brands) - Purple — luxury, creativity, mystery (popular with beauty and design) - Orange — friendliness, enthusiasm, affordability (great for value brands) - Pink — playfulness, warmth, femininity (fashion and lifestyle) - Yellow — optimism, happiness, attention-grabbing (use sparingly!) 💡 Rule of thumb: Pick a primary color you can live with for years. Trending colors change. Your brand color should outlast a design cycle. #### 3 Choose Your Neutrals Neutrals do most of the heavy lifting on any website — backgrounds, text, borders, cards. Get these wrong and your site will feel off, no matter how good your primary color is. A good neutral palette needs: - 1 background color (near-white for light mode, near-black for dark mode) - 2-3 surface colors (for cards, nav bars, inputs) - 3-4 text colors (primary text, secondary text, subtle/muted) - Border/divider colors Pro tip: don't use pure gray. Add a tiny hint of your primary color to your grays — it makes the whole palette feel cohesive and intentional. For example, instead of #666666, try #64748b (slate gray with blue undertones). #F8FAFC #E2E8F0 #94A3B8 #475569 #0F172A Slate neutrals — warm gray with blue undertones #### 4 Pick 1-2 Accent Colors Accent colors are for highlights, CTAs, success/error states, and visual interest. Less is more here — too many accent colors make a design feel busy and cluttered. For most websites, you'll need: - 1 bold accent for primary CTAs (can be your primary color) - 1 success color (typically green) for positive states - 1 error color (typically red/rose) for warnings and errors For visual interest, you might add one more accent — but be careful. If your primary is blue, a soft purple or teal accent works well because they're adjacent on the color wheel. #### 5 Follow the 60-30-10 Rule Once you have your colors, apply them with the classic 60-30-10 ratio: - 60% — Dominant neutral (background, page chrome) - 30% — Secondary neutral or primary (cards, sidebars, headers) - 10% — Accent color (buttons, links, highlights) This ratio ensures your accent color has the most impact because it's used sparingly. When everything is a highlight, nothing is a highlight. #### 6 Test, Test, Test ##### Contrast Check Run every text/background pair through a contrast checker. Body text needs at least 4.5:1 ratio for WCAG AA. Buttons and interactive elements need 3:1 minimum. Use our Contrast Checker to test quickly. ##### Apply to Real Content Colors look different in context. Don't judge a palette by swatches alone — drop them into a real page with real text, images, and components. You might find that a color that looked great as a swatch feels overwhelming at scale. ##### Test on Actual Screens Colors shift dramatically between monitors. What looks perfect on your fancy calibrated display might be washed out on a cheap laptop or a phone in bright sunlight. Test on multiple devices. #### 7 Create System Scale Don't just pick 3-5 colors and call it done. For a production-ready palette, create a scale of shades and tints for each color. This gives you flexibility while staying on brand. A typical scale has 9-10 steps from 50 (lightest) to 900 (darkest): - 50-200 — Light tints, great for backgrounds and subtle states - 300-500 — Mid tones, use for hover states, secondary elements - 500-600 — The "base" of the color, your brand color - 700-900 — Dark shades, use for text and active states Our Color Picker tool automatically generates a full 50-900 scale from any color. #### Common Mistakes to Avoid ##### Too Many Colors The #1 mistake beginners make. A website is not a rainbow. Stick to 1 primary + neutrals + 1-2 accents max. You can add variety with shades and tints, not new hues. ##### All Saturated, No Rest If every color is fully saturated, the design vibrates and feels overwhelming. Use desaturated neutrals as breathing room. Saturated colors should be reserved for the elements that matter most. ##### Ignoring State Colors Don't forget hover, active, focus, disabled, success, and error states. Plan these into your palette from the start — don't improvise them later. ##### Skipping Dark Mode If you're building a modern website, dark mode isn't optional for much longer. Design both modes at the same time. You'll save yourself a painful retrofit later. #### Final Checklist Before finalizing your palette, run through this list: - ✅ Primary color clearly communicates brand personality - ✅ Neutrals have enough range (light → dark) for clear hierarchy - ✅ All text passes WCAG AA contrast (4.5:1 minimum) - ✅ Accent colors are used sparingly (max 10% of the design) - ✅ Palette works in both light and dark mode - ✅ Colors look good on actual screens, not just swatches - ✅ You have a scale of shades (50-900) for flexibility Ready to build your palette? Start with our Color Palette Generator — pick a base color and get a complete, balanced palette in seconds. ##### Related Articles ###### Color Theory Basics Every Designer Should Know Color Theory · 8 min ###### Color Psychology in Branding: What Your Colors Say Branding · 9 min #### Related Articles 📖 Design Systems ###### Best Color Palettes for SaaS Dashboards 📖 Color Theory ###### Color Psychology in Branding 📖 Design Tips ###### Monochromatic Color Palette Generator Guide © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## Color Psychology in Branding: What Your Colors Say About You | HexColor Pro Blog URL: https://hexcolorpro.pages.dev/blog/color-psychology-branding ### Color Psychology in Branding: What Your Colors Say About You How colors shape perception, drive emotion, and influence buying decisions. By Yao Xiangqian · Nov 7, 2026 · 9 min read People decide whether they like a product within 90 seconds — and up to 90% of that judgment is based on color alone (study from the University of Winnipeg). Your brand's color palette isn't just decoration — it's a communication tool that works faster than words. In this article, we'll break down the psychology of major colors, how big brands use them, and how to choose colors that send the right message about your business. #### Blue: Trust & Stability ##### The World's Most Popular Brand Color Blue is the most commonly used color in corporate branding — and for good reason. It's associated with trust, reliability, competence, and calm. It's the color of the sky and the ocean, both things humans find reassuring. Best for: Tech companies, financial services, healthcare, B2B software — any brand that wants to be seen as trustworthy and professional. Famous examples: Facebook, Twitter/X, PayPal, IBM, Ford, American Express Watch out for: Too much blue can feel cold, corporate, or unemotional. Add warmer accent colors to inject personality. #### Red: Energy & Urgency ##### The Attention Grabber Red is the most emotionally intense color. It raises blood pressure, increases heart rate, and creates urgency. It's impossible to ignore — which is why it's used for stop signs, fire alarms, and clearance sales. Best for: Food & beverage, entertainment, retail sales, action-oriented brands. Red stimulates appetite and creates excitement. Famous examples: Coca-Cola, Netflix, Target, YouTube, McDonald's, KFC Watch out for: Red can feel aggressive or cheap if overused. Use it as an accent for CTAs and important moments, not as a background color. #### Green: Nature & Growth ##### The Color of Health & Money Green is the easiest color on the human eye — it requires almost no adjustment to perceive. It's deeply associated with nature, health, growth, and money. It feels safe and relaxing. Best for: Eco-friendly brands, health & wellness, organic food, financial apps, outdoor companies. Famous examples: Starbucks, Spotify, Whole Foods, WhatsApp, John Deere, BP Watch out for: Green can feel generic or boring. Use an interesting shade (sage, emerald, mint) to stand out. #### Purple: Luxury & Creativity ##### The Royal Color Purple has been associated with royalty and wealth for thousands of years — originally because purple dye was incredibly rare and expensive. Today it still conveys luxury, creativity, and mystery. Best for: Beauty & cosmetics, creative agencies, luxury goods, design tools, spiritual/wellness brands. Famous examples: Cadbury, Hallmark, Yahoo!, Twitch, Taco Bell, Urban Decay Watch out for: Purple can feel artificial or childish in bright neon shades. For luxury, lean toward deeper, more muted purples. #### Orange: Friendliness & Affordability ##### The Approachable Color Orange is like a friendly wave. It's warm, energetic, and inviting without being as aggressive as red. It says "we're fun and affordable, come hang out." It's also one of the most attention-grabbing colors. Best for: Budget-friendly brands, kid products, food, fitness, fun lifestyle brands. Famous examples: Amazon (smile/logo accent), Nickelodeon, Fanta, Harley-Davidson, Home Depot Watch out for: Orange can feel cheap or unsophisticated. Not the best choice for luxury or professional services. #### Yellow: Optimism & Happiness ##### The Mood Lifter Yellow is the color of sunshine and happiness. It's the most visible color in daylight — which is why taxis and warning signs use it. It grabs attention and feels optimistic. Best for: Fast food, kids brands, household products, anything that wants to feel cheerful and energetic. Famous examples: McDonald's (golden arches), IKEA, Snapchat, National Geographic, Best Buy Watch out for: Pure yellow can be hard on the eyes and is very difficult to read on white. Use it as an accent, not for text. Duller yellows (mustard, gold) feel more sophisticated. #### Pink: Playfulness & Warmth ##### More Versatile Than You Think Pink has been making a huge comeback in branding. From soft blush to bold hot pink, it's used for everything from luxury beauty to tech startups. It feels warm, playful, and modern. Best for: Beauty & fashion, lifestyle brands, creative tools, DTC brands targeting younger audiences. Famous examples: Lyft, Glossier, T-Mobile, Barbie, Dunkin' (in their current palette) Watch out for: Stereotypes — pink can feel overly feminine or childish. A muted, dusty pink or a bold magenta can avoid this. #### Black & White: Luxury & Minimalism Black is the color of sophistication, power, and luxury. White is the color of purity, simplicity, and cleanliness. Together, they create the ultimate minimalist statement — think Chanel, Apple, Nike. Monochrome branding works when the product or design itself is strong enough to carry it. The danger is that without a signature color, your brand can feel less memorable or harder to recognize at a glance. #### Context Matters More Than You Think Here's the truth about color psychology: it's not universal. Color meanings shift based on: - Culture — White means purity in Western cultures but mourning in many East Asian cultures. Red means luck in China but danger in the West. - Personal experience — If your grandma had a yellow kitchen, yellow might feel comforting to you regardless of what studies say. - Context — A red cross on a white background means "hospital," not "danger" or "sale." Colors mean things in context, not in a vacuum. 💡 Research your market. If you're targeting a global audience, make sure your color choices don't have unintended negative meanings in key markets. #### How to Apply This to Your Brand ##### 1. Define your brand personality first Before picking colors, define 3-5 personality traits. Are you trustworthy? Playful? Luxurious? Adventurous? Then pick colors that match those traits. ##### 2. Look at your competitors What colors does everyone in your industry use? You can either fit in (using industry-standard colors signals "we understand this space") or stand out (using unexpected colors helps you get noticed). Both are valid strategies — just choose intentionally. ##### 3. Test with real people Show your color palette to 5-10 people in your target audience and ask them to describe the brand in 3 words. If they use the words you want them to use, you're on the right track. ##### 4. Start with one hero color Don't overcomplicate it. Pick one color that represents your brand best, build the rest of the palette around it, and iterate from there. Use our Color Scheme Generator to explore options from your hero color. #### The Bottom Line Color psychology is a powerful tool, but it's not a science with exact formulas. The best color for your brand is the one that: feels right for your personality, stands out from competitors, and resonates with your target audience. Trust your instincts, but validate with data. Want to explore color options for your brand? Try our Palette Generator to generate 50+ professional-looking palettes in seconds. ##### Related Articles ###### How to Choose a Perfect Color Palette for Your Website Design Tips · 11 min ###### Color Theory Basics Every Designer Should Know Color Theory · 8 min #### Related Articles 📖 Design Tips ###### Web Color Palette Guide 📖 Design Systems ###### Best Color Palettes for SaaS Dashboards 📖 Color Theory ###### Color Theory Basics © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## Dark Mode Design: Best Practices for Color Systems That Work | HexColor Pro Blog URL: https://hexcolorpro.pages.dev/blog/dark-mode-design-best-practices ### Dark Mode Design: Best Practices for Color Systems That Work Everything you need to know to design beautiful, accessible dark mode interfaces. By Yao Xiangqian · Nov 7, 2026 · 10 min read Dark mode has gone from "nice to have" to table stakes. Users expect it. Operating systems support it natively. But designing a great dark mode is harder than just inverting colors — there are traps everywhere. Let's break down the best practices for designing dark mode interfaces that look great, feel good to use, and pass accessibility standards. #### 1. Don't Use Pure Black This is the #1 mistake people make when designing dark mode. Pure black (#000000) backgrounds cause a few problems: - Eye strain on OLED screens — Pure black causes high contrast that makes text harder to read for long periods. - Black crush — Shadows and depth disappear against true black. Everything looks flat. - Halation — Bright white text on pure black bleeds and glows, especially on OLED displays. Instead, use a dark gray background. Most design systems use something in the #0F172A to #1A1A1A range. ❌ Bad: #000000 pure black background ✅ Good: #0F172A (slate-900) or #18181B (zinc-900) Here's a good starting point for dark mode surfaces: #0F172A #1E293B #334155 #475569 #64748B #### 2. Reduce Saturation in Dark Mode Colors appear more vivid on dark backgrounds. A blue that looks great on white might feel blinding or garish on dark gray. Best practice: desaturate your accent colors by 10-30% for dark mode. Or shift them toward the lighter end of the spectrum (the 200-400 range instead of 500-700). Material Design recommends using the 200 weight of your primary color for dark mode instead of the 500 you use in light mode. #### 3. Rethink Elevation In light mode, you create depth with shadows. In dark mode, shadows barely register — you need a different approach. Dark mode elevation works by lightening the background . A card sits above the page background, so it should be slightly lighter. A modal sits above everything, so it's lighter still. A typical dark mode elevation scale: - Background (level 0): #0F172A — the page background - Card (level 1): #1E293B — cards, inputs, nav bars - Raised (level 2): #334155 — hovered cards, dropdowns - Modal (level 3): #475569 — modals, popovers Some design systems add a subtle colored tint to elevated surfaces (a hint of blue or purple) to make the elevation feel more intentional. #### 4. Pay Attention to Text Contrast Dark mode text contrast is trickier than it seems. Here's what you need to know: ##### Don't use pure white text Pure white (#FFFFFF) on dark backgrounds creates halation — the text appears to glow and bleed into the background. Use off-white instead: #F8FAFC or #E2E8F0. ##### Create a text hierarchy You need multiple text shades, just like in light mode: - Primary text: #F1F5F9 — body copy, headings - Secondary text: #CBD5E1 — descriptions, metadata - Muted text: #94A3B8 — captions, timestamps, disabled states - Subtle text: #64748B — very subtle information 💡 Always test with a contrast checker. Dark mode contrast can be deceptive. What "feels" readable might fail WCAG AA. Use our Contrast Checker to verify. #### 5. Watch Out for "Vibrating" Colors Certain color combinations in dark mode produce a vibrating, uncomfortable effect — especially saturated warm colors (red, orange, yellow) on dark backgrounds. The colors appear to flicker or buzz. Fix it by: - Desaturating the color - Making the color slightly lighter or slightly darker - Using a tint of the color instead of the pure hue #### 6. Borders & Dividers Dark mode borders should be subtle — but not invisible. Common mistake: borders that are too dark and disappear, or too light and look like fence posts. A good rule: your default border should be just barely visible. If you can see it from across the room, it's too strong. Aim for something like #334155 on a #0F172A background. For dividers between items, use even subtler borders — or skip borders entirely and use background color changes instead. #### 7. Images in Dark Mode Images don't automatically work in dark mode. A bright photo on a dark background can be jarring. Options: - Dim images — Add a subtle dark overlay or reduce brightness in dark mode. - Use dark mode specific images — If you control the images, provide both light and dark versions. - Add a background — Put images inside a card so the transition from dark background to bright image is softer. #### 8. Icons & Illustrations Icons need the same treatment as text — make sure they have enough contrast but aren't harsh. Use the same color hierarchy you use for text (primary, secondary, muted). For illustrations, consider swapping to darker versions. Many illustration libraries now provide both light and dark variants. #### 9. System Color Scheme Support On the web, use prefers-color-scheme to automatically match the user's system preference: @media (prefers-color-scheme: dark) { /* dark mode styles */ } But always provide a manual toggle too. Some users prefer light mode at night or dark mode during the day. Don't force it. #### 10. Test on Real Devices Dark mode looks different on every screen. OLED screens have deeper blacks and more vibrant colors. LCD screens wash out dark grays. Cheap laptop screens make everything look muddy. Test your dark mode on: - An OLED phone (most modern Android and iPhone Pro models) - A cheap LCD laptop - A high-end desktop monitor - Outside in bright sunlight (yes, people use dark mode outside too) #### Common Dark Mode Mistakes ##### ❌ Inverting everything Light mode white = dark mode black. Light mode gray = dark mode lighter gray. That's not how it works. Dark mode has its own logic — you need to rethink the whole system. ##### ❌ Too much pure white Pure white text causes halation. Use #F1F5F9 or #F8FAFC instead. Reserve pure white for tiny elements that need maximum contrast. ##### ❌ No depth If everything is the same shade of gray, the interface feels flat. Use lighter backgrounds for elevated elements. ##### ❌ Oversaturated accents Colors pop more on dark backgrounds. Tone them down. Your 500-weight primary in light mode should probably be a 300 or 400 in dark mode. ##### ❌ Ignoring focus states Focus rings are easy to see on white. On dark backgrounds? They disappear. Make focus states visible — use a bright ring or a glow effect. #### Dark Mode Color System Template Here's a complete dark mode color system to get you started, built on Tailwind's slate palette: - Background: slate-900 (#0F172A) - Surface (cards, inputs): slate-800 (#1E293B) - Surface hover: slate-700 (#334155) - Border / divider: slate-700 (#334155) - Primary text: slate-100 (#F1F5F9) - Secondary text: slate-300 (#CBD5E1) - Muted text: slate-400 (#94A3B8) - Primary accent: indigo-400 (#818CF8) - Success: emerald-400 (#34D399) - Error: rose-400 (#FB7185) Build your own system with our Color Converter and Palette Generator — both support dark mode preview. #### Final Thought Great dark mode design isn't about "turning off the lights." It's about creating a whole new visual system that respects how human vision works in low-light environments. Take the time to do it right — your users will thank you. ##### Related Articles ###### Accessibility & Contrast: A Complete Guide for Web Designers Accessibility · 9 min ###### How to Choose a Perfect Color Palette for Your Website Design Tips · 11 min #### Related Articles 📖 Design Tips ###### Dark Mode Color Schemes: Engineering Guide 📖 Accessibility ###### Color Contrast & Accessibility Guide 📖 Trends ###### Gradient Design Trends 2026 © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## Dark Mode Color Scheme Design: Complete Best Practices Guide | HexColor Pro Blog URL: https://hexcolorpro.pages.dev/blog/dark-mode-color-scheme-guide ### Dark Mode Color Scheme Design: Complete Best Practices Guide How to design dark mode colors that don't strain eyes, maintain hierarchy, and pass accessibility tests. Includes 10 ready-to-use palettes. By Yao Xiangqian · Nov 8, 2026 · 2000 words · 8 min read #### Why Dark Mode Design Is Hard Dark mode isn't just "invert the colors." If you take a light theme, flip white to black and black to white, you'll get something that looks off — harsh, washed out, and hard to read. Good dark mode design is a whole different discipline. The challenge comes from how human vision works. In bright environments, our eyes use photopic vision (cones). In dim environments, we switch to scotopic vision (rods). These two systems perceive color and contrast differently, and a palette that works in one mode won't necessarily work in the other. 🧠 Science fact: In dark mode, blue light appears brighter than it actually is (the Purkinje effect). That's why pure blue text on dark backgrounds can glow and be hard to read — even if it technically passes contrast tests. #### Dark Mode Color Principles ##### 1. Never use pure black (#000000) Pure black backgrounds cause halation — bright text literally bleeds into the dark background, making text appear fuzzy. Use a dark gray instead, like #0F172A or #121212 (Material Design's recommendation). ##### 2. Never use pure white (#FFFFFF) for body text Pure white on dark is too high contrast and causes eye strain over long sessions. Use an off-white like #E2E8F0 or #F1F5F9 for body text. Save pure white for headings and accents only. ##### 3. Lower your saturation Colors appear more saturated on dark backgrounds. A brand color that looks perfect in light mode might feel blinding in dark mode. Desaturate by 10-30% for dark mode variants. ##### 4. Elevation = lighter, not darker In light mode, elevation is shown with shadows (darker). In dark mode, it's the opposite — elevated surfaces are lighter than the background. Cards should be lighter than the page background, not darker. #### The Material Design Dark Theme Approach Google's Material Design has one of the most well-researched dark mode systems. Here's how they structure it: | Elevation | Color | Opacity Overlay | Use For | | 0 (Background) | ■ #121212 | 0% | Base page background | | 1 (Card) | ■ #1E1E1E | 5% white overlay | Cards, sheets, menus | | 2 (Raised) | ■ #222222 | 7% white overlay | Raised buttons, search bars | | 3 (Modal) | ■ #242424 | 8% white overlay | Dialogs, popovers | | 4 (Top) | ■ #272727 | 9% white overlay | Navigation, top bars | The key insight: instead of having separate colors for each elevation level, you start with your base dark color and overlay white at different opacities. This creates a consistent, natural-feeling elevation system. #### 10 Ready-to-Use Dark Mode Color Palettes ##### 1. Slate (Developer Favorite) Background #0F172A · Surface #1E293B · Text #E2E8F0 · Primary #818CF8 · Accent #22D3EE Our pick for developer tools, dashboards, and technical products. Inspired by Tailwind's slate palette. Easy on the eyes during all-night coding sessions. ##### 2. Deep Purple (Creative Tools) Background #1A0B2E · Surface #2D1B4E · Text #E9D5FF · Primary #A855F7 · Accent #F0ABFC For creative tools, design apps, and entertainment products. Feels premium and imaginative. ##### 3. Midnight Navy (Finance & SaaS) Background #0C1929 · Surface #162A45 · Text #CBD5E1 · Primary #60A5FA · Accent #34D399 Professional and trustworthy. Perfect for fintech, analytics, and B2B dashboards. ##### 4. Forest Green (Health & Wellness) Background #0A1F1C · Surface #14332D · Text #A7F3D0 · Primary #34D399 · Accent #FBBF24 Calm, natural, and grounded. Great for health, wellness, and eco-focused products. ##### 5. Warm Charcoal (Content & Reading) Background #1C1917 · Surface #292524 · Text #D6D3D1 · Primary #FB923C · Accent #FBBF24 Easy on the eyes for long-form reading. The warm tones reduce eye strain compared to cool grays. ##### 6. Solarized Dark (Classic) Background #002B36 · Surface #073642 · Text #93A1A1 · Primary #268BD2 · Accent #B58900 The classic. Developed by Ethan Schoonover with precise CIELAB lightness relationships. Still beloved by coders and writers. ##### 7. Dracula (Developer Iconic) Background #282A36 · Surface #44475A · Text #F8F8F2 · Primary #BD93F9 · Accent #FF79C6 Possibly the most popular dark theme in the world. Purple/pink palette that works across 300+ apps. Instantly recognizable. ##### 8. Nord (Minimalist) Background #2E3440 · Surface #3B4252 · Text #ECEFF4 · Primary #88C0D0 · Accent #8FBCBB Arctic-inspired, cool blue-gray palette. Clean, minimal, and very calming. Popular in the developer community. ##### 9. Rose (Warm & Feminine) Background #1F1217 · Surface #301D24 · Text #FECDD3 · Primary #FB7185 · Accent #F472B6 Warm, inviting, and modern. Great for beauty, lifestyle, and creative community products. ##### 10. Monochrome (Ultra-Minimal) Background #18181B · Surface #27272A · Text #D4D4D8 · Primary #FAFAFA · Accent #A1A1AA For content-first products where color should stay out of the way. All focus goes to imagery and text. ⚠️ Don't just desaturate your light palette: Desaturating light mode colors gives you murky, lifeless dark mode colors. Instead, start from the dark side — pick your darkest background first, then work upward. #### Dark Mode Typography Colors Don't use the same text colors as light mode. Use a 3-4 level text hierarchy: | Level | Color (Slate Dark) | Use For | Contrast | | Primary Text | #F1F5F9 (slate-100) | Headings, important info | 15.8:1 (AAA) | | Body Text | #CBD5E1 (slate-300) | Body copy, paragraphs | 10.6:1 (AAA) | | Secondary | #94A3B8 (slate-400) | Captions, meta, labels | 6.0:1 (AA) | | Disabled | #64748B (slate-500) | Disabled text, placeholders | 2.7:1 (below AA) | #### Accessibility in Dark Mode Dark mode doesn't automatically mean accessible. You still need to check: - Contrast ratios: 4.5:1 minimum for body text. Our Contrast Checker works for both light and dark backgrounds. - Halation: Light text on very dark backgrounds can appear to glow and blur. Slightly off-white text + slightly off-black background fixes this. - Blue light: Highly saturated blue text or UI elements on dark backgrounds cause more eye strain. Desaturate blues or warm them up. - Focus states: Dark mode focus rings are often too subtle. Make them thick and high-contrast. #### Implementation Tips for CSS Use CSS custom properties with a dark class or prefers-color-scheme media query: ``` :root { --bg: #ffffff; --surface: #f8fafc; --text: #0f172a; --primary: #6366f1; } @media (prefers-color-scheme: dark) { :root { --bg: #0f172a; --surface: #1e293b; --text: #e2e8f0; --primary: #818cf8; } } ``` #### Start Designing Ready to build your dark mode palette? Use our Palette Generator to find complementary colors, then generate tint/shade scales with our Shades Generator . Always test with the Contrast Checker before shipping. 🧰 Related Tools Palette Generator — Generate harmonious color schemes Color Shades Generator — Create tint and shade scales ##### Related Articles ###### Hex to RGB COLOR THEORY ###### WCAG Contrast Ratio Explained ACCESSIBILITY ###### What Is HSL Color? A Beginner's Guide to Hue, Saturation & Lightness COLOR THEORY ###### How Many Hex Colors Are There? (And Why It's Not Exactly 16 Million) COLOR BASICS #### Related Articles 📖 Design Tips ###### Dark Mode Design Best Practices 📖 Accessibility ###### WCAG Contrast Ratio: How to Calculate & Pass 📖 Accessibility ###### Color Contrast & Accessibility Guide © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## Gradient Design Trends 2026: How to Use Gradients Without Looking Cheesy | HexColor Pro Blog URL: https://hexcolorpro.pages.dev/blog/gradient-design-trends-2026 ### Gradient Design Trends 2026: How to Use Gradients Without Looking Cheesy Modern gradients are subtle, sophisticated, and everywhere. Here's what's trending — and how to do it right. By Yao Xiangqian · Nov 7, 2026 · 8 min read Gradients are back — but not the cheesy 2000s MySpace gradients you're thinking of. Modern gradients are subtle, sophisticated, and used with purpose. They've evolved from "look at me!" eye candy to a fundamental design tool for adding depth, personality, and visual interest. Let's break down what's happening in gradient design right now and how to use these trends in your own work. #### Trend 1: Subtle "Almost Solid" Gradients The biggest gradient trend right now is barely there gradients — colors so close together you might not even notice it's a gradient at first glance. It's more about adding richness and depth than making a statement. A subtle purple-blue gradient — close enough to feel like a single rich color How to do it: pick two colors that are close in hue and value. The difference should be just enough to add dimension, not enough to scream "gradient!" Think of it as a color with "movement" rather than a full spectrum shift. #### Trend 2: Grain & Noise Gradients Clean CSS gradients can feel too digital, too perfect. Adding a subtle grain or noise texture gives gradients a tactile, organic, analog feel — like film grain or printed ink. Grain gradients are everywhere in 2026: brand identities, album art, websites, app UI. They add warmth and personality without being loud. How to add grain in CSS: Layer a noise SVG on top of your gradient using a very low opacity (5-15%). Or use a CSS backdrop-filter technique. The grain should be felt, not seen — if users can point out the noise, it's too much. #### Trend 3: Mesh Gradients Mesh gradients (also called multi-stop gradients or organic gradients) are like the gradient's cooler, more sophisticated cousin. Instead of a simple two-color blend, mesh gradients use multiple color stops that blend together in organic, unpredictable ways. A mesh gradient with 4 color blobs blending into each other Mesh gradients feel painterly and natural. They're great for hero backgrounds, product photography backdrops, and brand illustrations. Tools like Mesh Gradient Generator and Figma's Mesh Gradient tool make creating them easy. #### Trend 4: Gradient Text Gradient text has been building for a few years and it's now fully mainstream. Done right, it adds instant personality to headlines and logos without sacrificing readability. The key to good gradient text: - Use bold or heavy weights — thin text with gradients looks messy - Keep the gradient subtle — similar hues, not rainbow - Make sure it's still readable (high contrast against background) - Use sparingly — one gradient headline per page, max - Provide a fallback for older browsers CSS for gradient text: background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; #### Trend 5: "Dawn/Dusk" Gradients Soft, atmospheric gradients that evoke sunrise or sunset — warm oranges and pinks fading into cool blues and purples. Think of those Instagram-worthy sky photos at golden hour. A warm-to-cool sunset-inspired gradient These gradients feel emotional and dreamy. They're popular with lifestyle brands, wellness apps, and anything that wants to feel warm and inviting. #### Trend 6: Mono-Color Gradients Sometimes called "shade gradients," these use different tones of the same color — light blue to dark blue, pale pink to deep burgundy. They're the most sophisticated type of gradient because they add depth without introducing new colors. Mono gradients are perfect for: - Buttons (light top, dark bottom = depth) - Cards and surfaces - Brand systems that need to stay within a strict palette - Minimal designs that still want some visual interest #### How NOT to Use Gradients (Common Mistakes) ##### 1. Too many colors Rainbow gradients went out with MySpace. Modern gradients use 2-3 colors, max. If you're using more, you're probably doing it wrong. ##### 2. Clashing hues Not every color combination makes a good gradient. Colors that clash on purpose can be cool in small doses, but for most purposes, stick to analogous colors (next to each other on the color wheel) for smooth gradients. Use our Color Scheme Generator to find complementary pairs. ##### 3. Gradient over everything Just because you can doesn't mean you should. Gradients work best as accents — a hero background, a button, a highlight. If your whole site is gradients, it's overwhelming. ##### 4. Bad midpoints The default CSS gradient midpoint (50%) doesn't always look right. Sometimes you want more of color A, sometimes more of color B. Adjust the color stop positions to control the blend. ##### 5. Ignoring readability Text on gradients is risky. If you put text on a gradient background, make sure there's enough contrast across the entire gradient. The lightest point and the darkest point both need to pass contrast checks. 💡 Pro tip: When putting text on a gradient, add a subtle dark overlay (gradient-to-black) at the bottom where the text sits. It ensures readability while keeping the gradient visible. #### Gradient CSS Techniques You Should Know ##### Linear Gradient linear-gradient(direction, color1, color2) The most common type. Great for backgrounds, buttons, overlays. ##### Radial Gradient radial-gradient(shape, color1, color2) Good for spotlight effects, glows, and "orbs" in hero sections. ##### Conic Gradient conic-gradient(from angle, color1, color2) For pie charts, color wheels, and circular UI elements. Use sparingly. ##### Repeating Gradient repeating-linear-gradient(...) For patterns, stripes, and textured backgrounds. #### Making Gradients Accessible Gradients and accessibility can coexist — you just need to be thoughtful: - Text contrast — Test text on every part of the gradient, not just an average point. - Don't rely on color alone — If you're using gradient to convey information (like a progress bar), pair it with text or icons. - Respect prefers-reduced-motion — Animated gradients can trigger vestibular issues. Let users turn them off. - Provide fallbacks — Solid color background behind the gradient for older browsers. #### Ready to Make Your Own Gradients? The best way to learn gradient design is to play with it. Our Gradient Generator lets you build beautiful CSS gradients in seconds, with preset palettes, angle controls, and one-click copy-to-clipboard. Try the "Mesh" mode for on-trend multi-color blends. And remember: the best gradients are the ones people feel more than they see. Subtlety is everything. ##### Related Articles ###### How to Choose a Perfect Color Palette for Your Website Design Tips · 11 min ###### Color Theory Basics Every Designer Should Know Color Theory · 8 min #### Related Articles 📖 Design Tips ###### Web Color Palette Guide 📖 Design Tips ###### Dark Mode Design Best Practices 📖 Color Theory ###### Color Theory Basics © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## Best Color Palettes for SaaS Dashboards in 2026 | HexColor Pro Blog URL: https://hexcolorpro.pages.dev/blog/saas-dashboard-color-palette ### Best Color Palettes for SaaS Dashboards in 2026 12 proven SaaS dashboard color schemes with examples. Learn how to choose colors that communicate data clearly and look professional. By Yao Xiangqian · Nov 8, 2026 · 1900 words · 8 min read #### Why Dashboard Color Palettes Matter Your dashboard's color scheme does more than look pretty — it directly affects how users interpret data, navigate your product, and even how much they trust it. A bad color palette makes data harder to read, hides important information, and causes eye strain during long sessions. SaaS dashboards have unique constraints compared to marketing sites: - High information density: Charts, tables, KPIs, and widgets packed together - Long session times: Users stare at dashboards for hours - Color as meaning: Colors encode data (up = green, down = red, etc.) - Accessibility is non-negotiable: Charts need to work for colorblind users #### Key Principles for SaaS Dashboard Colors ##### 1. Use a limited primary palette 1 primary brand color + 2-3 accent colors max. The rest should be neutrals. Your data visualizations should do the coloring, not the chrome around them. ##### 2. Neutrals carry the UI 80% of your dashboard UI should be neutral grays. This keeps the focus on content and data, not the chrome. Use a 9-11 shade neutral scale for consistency. ##### 3. Semantic colors must be distinct Success, warning, error, and info states need to be instantly recognizable — and not just by color hue. Pair them with icons for colorblind accessibility. ##### 4. Data colors need to be colorblind-safe Standard red/green doesn't work for 8% of male users. Use a colorblind-safe palette like Viridis, Plasma, or Tableau's colorblind 10 for charts. 🎨 Rule of thumb: If you can remove all color from your dashboard and still understand what's important, your design is solid. Color should reinforce, not carry the meaning. #### Palette 1: Minimal & Professional (B2B SaaS) Best for: analytics tools, CRMs, enterprise SaaS, financial dashboards. | Role | Color | Hex | Use For | | Primary | ■ | #2563EB | CTAs, selected states, primary data series | | Secondary | ■ | #64748B | Secondary actions, filters, inactive tabs | | Success | ■ | #059669 | Positive trends, active status, OK states | | Warning | ■ | #D97706 | Warnings, medium priority, attention needed | | Error | ■ | #DC2626 | Critical errors, failed, high priority | | Background | ■ | #F8FAFC | Page background | | Surface | ■ | #FFFFFF | Cards, widgets, tables | #### Palette 2: Dark Mode Native (Developer Tools) Best for: developer tools, monitoring dashboards, analytics platforms — anything users look at for 8+ hours a day. | Role | Color | Hex | Use For | | Primary | ■ | #818CF8 | Main actions, active states, primary series | | Accent | ■ | #22D3EE | Highlights, live indicators, real-time data | | Success | ■ | #34D399 | Up trends, healthy, online status | | Warning | ■ | #FBBF24 | Warnings, degraded performance | | Error | ■ | #F87171 | Down, errors, critical alerts | | Background | ■ | #0F172A | Page background | | Surface | ■ | #1E293B | Cards, code blocks, panels | #### Palette 3: Warm & Friendly (Customer Support) Best for: helpdesks, customer success tools, CRM dashboards — products where the tone should be approachable. | Role | Color | Hex | Use For | | Primary | ■ | #F97316 | Brand, main actions | | Secondary | ■ | #8B5CF6 | Secondary actions, premium features | | Success | ■ | #10B981 | Resolved tickets, happy customers | | Warning | ■ | #EAB308 | Pending, waiting on customer | | Error | ■ | #EF4444 | Urgent, SLA breached | | Background | ■ | #FFFBEB | Warm page background | #### Palette 4: High-Contrast (Healthcare & Government) Best for: medical dashboards, government portals, financial compliance tools — where WCAG AAA is required. | Role | Color | Hex | Contrast on White | | Primary | ■ | #1E40AF | 11.2:1 (AAA) | | Success | ■ | #065F46 | 8.3:1 (AAA) | | Warning | ■ | #92400E | 7.1:1 (AAA) | | Error | ■ | #991B1B | 7.8:1 (AAA) | | Info | ■ | #0C4A6E | 9.8:1 (AAA) | #### 5 Common Dashboard Color Mistakes ##### 1. Too many data colors Using 15 different colors for 15 chart series. Users can't remember what each means. Fix: Use 5-7 max, with interaction for the rest. ##### 2. Rainbow color scales The rainbow palette is perceptually uneven — yellow areas look more important than they are. Use a sequential scale like Viridis instead. ##### 3. Only using color to show status A green dot for "active" and red dot for "inactive" fails colorblind users. Add icons or shapes as backup. ##### 4. Neglecting empty states Dashboards with no data still need to look intentional. Use your neutral palette and illustration style consistently. ##### 5. Inconsistent semantic colors If "success" is green in one part of the app and teal in another, users get confused. Document and enforce your palette with design tokens. ⚠️ The red/green trap: Using red for "bad" and green for "good" is intuitive — but 8% of men can't tell them apart. Use shapes, icons, or labels alongside color. Our Contrast Checker also shows colorblind simulation. #### How to Build Your Own Dashboard Palette - Start with your brand color: This is your primary. Extract it from your logo or brand guidelines. - Generate a tint/shade scale: Use our Color Shades Generator to make a 9-step scale from your primary. - Pick semantic colors: Success (green), warning (amber/orange), error (red), info (blue). Adjust saturation to match your brand's vibe. - Build your neutral scale: 10-11 shades from near-white to near-black. Warm them slightly with your primary for brand consistency. - Test for accessibility: All text and UI elements must pass 4.5:1 (WCAG AA) minimum. - Test on real dashboards: Apply your palette to a real screen with charts and tables. Does it feel right? Can you read everything? #### Next Steps Ready to build your dashboard palette? Start with our Palette Generator to explore harmonious color combinations, then use the Shades Generator to build out your full scale. Finally, verify everything with the Contrast Checker before shipping. 🧰 Related Tools Palette Generator — Generate harmonious color schemes Color Shades Generator — Create tint and shade scales ##### Related Articles ###### Hex to RGB COLOR THEORY ###### WCAG Contrast Ratio Explained ACCESSIBILITY ###### What Is HSL Color? A Beginner's Guide to Hue, Saturation & Lightness COLOR THEORY ###### How Many Hex Colors Are There? (And Why It's Not Exactly 16 Million) COLOR BASICS #### Related Articles 📖 Design Tips ###### Web Color Palette Guide 📖 Color Theory ###### Color Psychology in Branding 📖 Design Tips ###### Dark Mode Design Best Practices © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## Monochromatic Color Palette: How to Create One (With Generator) | HexColor Pro Blog URL: https://hexcolorpro.pages.dev/blog/monochromatic-color-palette-generator ### Monochromatic Color Palette: How to Create One (With Generator) What is a monochromatic color scheme, why designers use them, and step-by-step how to generate a 7-shade monochrome palette from any color. By Yao Xiangqian · Nov 8, 2026 · 1600 words · 8 min read #### What Is a Monochromatic Color Scheme? A monochromatic color palette uses variations of a single base hue — different shades, tints, and tones — rather than multiple different colors. It's the simplest type of color scheme, and often the most elegant. Instead of combining red + blue + yellow, you pick one hue (say, 220° blue) and vary only its saturation and lightness. The result is a cohesive, calm, and professional-looking palette that's almost impossible to mess up. #### Why Designers Love Monochromatic Palettes ##### 1. They're foolproof Color theory 101: if everything is the same hue, nothing clashes. You can't accidentally pick colors that fight each other. It's the safest palette there is. ##### 2. They create visual harmony Monochromatic designs feel intentional and calm. There's no visual noise from competing colors, so the focus goes to layout, typography, and content. ##### 3. They make hierarchy easy Use the darkest shade for headings, medium for body text, lighter for backgrounds and borders. Your information hierarchy comes naturally from the lightness scale. ##### 4. They work great with accent colors A monochromatic base + one accent color is one of the most popular color strategies in UI design. The accent pops because everything else is tonally consistent. 🎨 Real-world example: Tailwind's color scales (slate-50 through slate-950) are essentially monochromatic palettes for each hue. That's why they work so well together — same hue, just different lightness levels. #### The Anatomy of a Monochromatic Palette A complete monochromatic palette usually has 7-11 distinct shades. Here's how to structure one: | Step | Lightness Range | Typical Use | | 50 (lightest) | 97-98% | Page background, hover states | | 100 | 93-95% | Card surface, subtle backgrounds | | 200 | 86-90% | Borders, dividers, disabled states | | 300 | 75-80% | Placeholder text, secondary icons | | 400 | 60-65% | Muted text, secondary text | | 500 (base) | 45-55% | Brand color, primary button, base color | | 600 | 35-45% | Hover states, bold text | | 700 | 25-30% | Body text on light backgrounds | | 800 | 15-20% | Headings, strong text | | 900 | 8-12% | Darkest UI, text on very light backgrounds | | 950 (darkest) | 4-6% | Nearly black, deepest backgrounds | #### How to Generate a Monochromatic Palette There are several methods, from dead-simple to technically precise. Here are three approaches: ##### Method 1: The HSL Way (Easiest & Best) This is the method most designers use. Take your base color in HSL, then keep H and S constant while varying L: - Pick your base color and get its HSL values. Example: indigo = hsl(239, 84%, 67%) - Keep hue (239) and saturation (84%) exactly the same - Create 9 variations by changing lightness only: 95%, 85%, 75%, 67% (base), 50%, 35%, 20%, 10%, 5% That's it! The result is a perfectly consistent monochromatic scale where every shade feels like the same color at different brightness levels. ##### Method 2: Mix with White/Black Another way to think about it: start with your base color, then mix in white for tints and black for shades. - Tints: Base + 10% white, +20% white, +30% white, etc. - Shades: Base + 10% black, +20% black, +30% black, etc. This produces a similar result to the HSL method but can sometimes feel flat. The HSL method is usually preferred because it preserves saturation better. ##### Method 3: Use a Generator Tool The fastest way. Use our Color Shades Generator — just paste your base hex code and get a 10-step monochromatic palette instantly. You can adjust the number of shades and the range. #### 5 Monochromatic Palette Examples ##### 1. Navy Blue (Corporate) Base: #1E3A8A (blue-900). Shades from #EFF6FF (blue-50) to #1E3A8A . The classic B2B SaaS palette. Feels trustworthy, professional, and established. ##### 2. Emerald Green (Fintech) Base: #10B981 (emerald-500). Shades from #ECFDF5 to #064E3B . Modern fintech favorite — suggests growth, money, and positivity. ##### 3. Violet Purple (Creative) Base: #8B5CF6 (violet-500). Shades from #F5F3FF to #4C1D95 . Creative, imaginative, and premium. Great for design tools and creative platforms. ##### 4. Rose Pink (Lifestyle) Base: #F43F5E (rose-500). Shades from #FFF1F2 to #881337 . Warm, friendly, and energetic. Works for beauty, fashion, and lifestyle brands. ##### 5. Slate Gray (Minimal) Base: #64748B (slate-500). Shades from #F8FAFC to #0F172A . The ultimate neutral monochrome palette. Let your content and photography do the talking. ⚠️ Common mistake: Many beginners create monochromatic palettes by adding transparency to a single color — e.g., your brand color at 100%, 80%, 60% opacity. This doesn't work well on colored backgrounds and doesn't give you true tint/shade variation. Use real HSL-based shades instead. #### Common Monochromatic Mistakes (And Fixes) ##### 1. Not enough contrast If your lightest and darkest shades are too close together, nothing stands out. Fix: Make sure your body text has at least 4.5:1 contrast against its background (WCAG AA). ##### 2. Too many shades Do you really need 20 steps? Probably not. 9-11 is the sweet spot for most design systems. Fewer = more consistent design. ##### 3. Ignoring saturation drift When you lighten or darken a color in RGB space, the perceived saturation changes. HSL avoids this, but many tools (and the human eye) still drift. Fix: Use a generator tool that keeps saturation consistent. ##### 4. No warm/cool shift Real pigments get warmer when darkened and cooler when lightened. Pure HSL monochrome can feel digital. For an organic feel, slightly shift hue + saturation as you vary lightness. #### Monochromatic + One Accent: The Winning Formula Here's the palette formula behind thousands of successful startups: one monochromatic neutral scale + one accent color . The neutral scale (usually gray/slate) handles all the UI chrome — backgrounds, cards, borders, text. The accent color handles CTAs, active states, and highlights. The result is clean, modern, and instantly usable. Why it works: - The accent pops because everything else is neutral - You can change the entire brand identity by changing just one color - It's easy to maintain accessibility — only one color to test against your neutrals #### Generate Your Palette Now Ready to make your own monochromatic palette? Head over to our Color Shades Generator . Paste any hex color and get a complete 10-step shade scale in under a second. Use it for design systems, UI components, or just finding the perfect shade of your favorite color. 🧰 Related Tools Palette Generator — Generate harmonious color schemes Color Shades Generator — Create tint and shade scales ##### Related Articles ###### Hex to RGB COLOR THEORY ###### WCAG Contrast Ratio Explained ACCESSIBILITY ###### What Is HSL Color? A Beginner's Guide to Hue, Saturation & Lightness COLOR THEORY ###### How Many Hex Colors Are There? (And Why It's Not Exactly 16 Million) COLOR BASICS #### Related Articles 📖 Color Theory ###### What Is HSL Color? A Developer's Guide 📖 Design Tips ###### Web Color Palette Guide 📖 Color ###### color-shades-generator © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## Accessible Color Palettes for Government & Healthcare Websites | HexColor Pro Blog URL: https://hexcolorpro.pages.dev/blog/accessible-color-palette-healthcare ### Accessible Color Palettes for Government & Healthcare Websites Compliance-ready color schemes for healthcare and government sites that need to meet WCAG 2.2 AA. Includes ready-to-use palette examples. By Yao Xiangqian · Nov 8, 2026 · 1800 words · 8 min read #### Why Healthcare & Government Need Special Color Palettes Healthcare and government websites serve the entire population — including older adults, people with visual impairments, and users with low digital literacy. A color palette that works fine for a startup's marketing site can be a real barrier for these users. These sectors also often have legal requirements: Section 508 in the US, EN 301 549 in the EU, and various national accessibility laws all mandate WCAG 2.1 AA compliance at minimum. Many go further and require AAA for critical information. But accessibility doesn't mean ugly. A well-designed accessible color palette can be both beautiful and inclusive. #### Key Accessibility Requirements Before we get to the palettes, let's recap the standards your colors need to meet: | Standard | Normal Text | Large Text | UI Components | | WCAG 2.2 AA | 4.5:1 | 3:1 | 3:1 | | WCAG 2.2 AAA | 7:1 | 4.5:1 | — | Healthcare and government sites should aim for WCAG AA as the legal minimum and target AAA for critical user pathways (login, appointments, results, payments). Also important but less discussed: - Color blindness: 8% of men have red-green color blindness. Never rely solely on color to convey meaning (error/success states, chart data). - Glare and halation: Pure white backgrounds can cause glare for users with cataracts. Slightly warm off-white backgrounds are easier on older eyes. - Focus indicators: Thick, high-contrast focus rings — not just a thin outline that blends in. 📋 Compliance tip: Document your color palette's contrast ratios in your design system. Include a table showing each color on each background with its ratio and pass/fail status. This makes audits much easier. #### Palette 1: Trustworthy Blue (Government Standard) Blue is the most trusted color across cultures and the default for government and healthcare. This palette is inspired by the US Web Design System and UK GOV.UK standards. | Role | Hex | Color | Contrast on White | | Primary | #005EA2 | ■ | 8.2:1 (AAA) | | Primary Light | #2491FF | ■ | 4.7:1 (AA) | | Primary Dark | #162E51 | ■ | 13.5:1 (AAA) | | Success | #00833D | ■ | 6.1:1 (AA) | | Warning | #936F00 | ■ | 5.3:1 (AA) | | Error | #B50909 | ■ | 6.2:1 (AA) | | Background | #F0F0F0 | ■ | — | | Body Text | #1B1B1B | ■ | 15.8:1 (AAA) | #### Palette 2: Calm Teal (Healthcare & Wellness) Teal and aqua feel clean, calm, and clinical — perfect for healthcare. This palette is warmer than pure blue and works well for patient-facing portals and wellness platforms. | Role | Hex | Color | Contrast on White | | Primary | #0A7C84 | ■ | 6.3:1 (AA) | | Secondary | #3D6D97 | ■ | 5.0:1 (AA) | | Success | #0E7C4F | ■ | 5.8:1 (AA) | | Warning | #8A6700 | ■ | 5.1:1 (AA) | | Error | #A8262C | ■ | 5.9:1 (AA) | | Info | #205493 | ■ | 7.2:1 (AAA) | | Background | #F5FAFA | ■ | — | #### Palette 3: Warm & Inclusive (Public Services) For sites serving diverse populations including many older adults. Warmer tones reduce eye strain and feel more welcoming than cool blues. Inspired by inclusive design best practices. | Role | Hex | Color | Contrast on #FFFAF0 | | Primary | #7C2D12 | ■ | 8.1:1 (AAA) | | Secondary | #4A5568 | ■ | 6.9:1 (AA+) | | Success | #22543D | ■ | 7.5:1 (AAA) | | Warning | #7B341E | ■ | 6.8:1 (AA) | | Error | #742A2A | ■ | 6.5:1 (AA) | | Background | #FFFAF0 | ■ | — | | Body Text | #1A1A1A | ■ | 17.3:1 (AAA) | #### Palette 4: High-Contrast Monochrome (Max Accessibility) For maximum accessibility and minimal distraction. Almost monochromatic with carefully chosen accent colors. Best for long-form content and forms. | Role | Hex | Contrast on White | | Primary Text | #111827 | 17.1:1 (AAA) | | Secondary Text | #374151 | 10.3:1 (AAA) | | Muted Text | #4B5563 | 7.3:1 (AAA) | | Border | #D1D5DB | — | | Link / Primary | #1D4ED8 | 8.6:1 (AAA) | | Success | #166534 | 7.0:1 (AAA) | | Error | #991B1B | 7.8:1 (AAA) | #### Colorblind-Safe Data Colors Charts and data visualizations are especially tricky for healthcare and government. Avoid the standard red/green/blue/yellow rainbow palette — it's a disaster for colorblind users. Use a colorblind-safe sequential or categorical palette instead: | Palette Type | Example Colors | Colorblind Safe? | | Viridis (sequential) | #440154 | #35B779 | #FDE725 | Yes (all types) | Cividis (sequential) | #00204C | #E4B853 | #FEC65B | Yes | | Okabe-Ito (categorical) | 8 distinct colors | Yes (research-backed) | | Tableau Colorblind 10 | 10 distinct colors | Yes | The Okabe-Ito palette is especially recommended — it was developed specifically for maximum distinguishability for people with all types of color vision deficiency. ⚠️ Never rely on color alone: Even with a colorblind-safe palette, always pair color with another indicator — icons, patterns, shapes, labels, or tooltips. This is a WCAG requirement (1.4.1 Use of Color, level A). #### Implementation Best Practices ##### Use design tokens, not hardcoded colors Define your palette as semantic tokens — --color-primary , --color-error , --color-text-body — not just --blue-600 . This makes it much easier to maintain dark mode, high-contrast mode, and theme updates. ##### Provide a high-contrast mode toggle WCAG allows you to offer a high-contrast mode as an alternative, as long as it's easy to find and use. Many government sites include this as a standard feature. ##### Test with real users Automated tools catch about 30% of accessibility issues. For the other 70%, you need real users — especially older adults and people with visual impairments. Include them in your testing process. ##### Audit regularly Accessibility isn't a one-time check. New features, new components, and new content can all introduce new issues. Schedule quarterly audits and run automated checks in CI. #### Start Testing Your Palette Want to verify your healthcare or government color palette meets accessibility standards? Use our Color Contrast Checker to test any color pair against WCAG 2.2 AA and AAA standards. It also includes colorblind simulation and suggests adjustments if your colors fail. 🧰 Related Tools Color Contrast Checker — Test your colors against WCAG standards Palette Generator — Generate harmonious color schemes ##### Related Articles ###### Hex to RGB COLOR THEORY ###### WCAG Contrast Ratio Explained ACCESSIBILITY ###### What Is HSL Color? A Beginner's Guide to Hue, Saturation & Lightness COLOR THEORY ###### How Many Hex Colors Are There? (And Why It's Not Exactly 16 Million) COLOR BASICS #### Related Articles 📖 Accessibility ###### Color Contrast & Accessibility Guide 📖 Accessibility ###### WCAG Contrast Ratio: How to Calculate & Pass 📖 Color Theory ###### Color Psychology in Branding © 2026 HexColor Pro · Home · Privacy · Terms · Contact · About --- ## 37.1% of the brand accents we measured fail WCAG AA with white text | HexColor Pro Blog URL: https://hexcolorpro.pages.dev/blog/brand-accent-contrast-study-2026 ### 37.1% of the brand accents we measured fail WCAG AA with white text By Yao Xiangqian · 2026-11-11 · 6 min read · data: CSV We pulled the dominant accent colour out of the CSS on 70 well-known homepages and checked it against WCAG 2.2. With white text — the default label colour on most brand buttons — 37.1% of accents (26 of 70) fail the 4.5:1 requirement, and 14 fail even the 3:1 large-text threshold. With black text, the picture inverts almost completely: 0 accents fail both. The colour is rarely the problem; the label colour is. 70 homepages measured 37.1% accent fails AA with white text 14 fail even 3:1 (large text) 0 fail with both black and white #### Why the label colour matters more than the brand colour Contrast is symmetric but not symmetric in practice: designers pick white labels on brand buttons far more often than black, because white reads as "clean" on a saturated surface. The measurement says that instinct takes a mid-tone accent and drops it below the normal-text threshold. Take a mid blue at #2560FF : 5.00:1 with white, which passes. Now the same hue one step lighter, #3B82F6 : 3.68:1 — still fine to the eye, and below 4.5:1 on paper. The colour did not get worse; the pairing did. #### How the sample behaves Each bar is one contrast band; the value is the share of the 70 measured accents. | Accent contrast against white text | sites | | share | | below 3:1 — fails AA at every size | 14 | | 20% | | 3–4.49:1 — large text only | 12 | | 17.1% | | 4.5–6.99:1 — passes AA | 31 | | 44.3% | | 7:1+ — passes AAA | 13 | | 18.6% | The second row is the expensive one: 12 accents sit between 3:1 and 4.5:1. They look correct on a bright monitor and fail for body-size labels, which is exactly the zone that survives design review and ships. #### By hue: warm and light accents are the ones that break Pass rate at 4.5:1 with white text, by hue. Bands with fewer than two sites are omitted. | Hue band | n | median contrast with white | passes 4.5:1 with white | | Yellow (45–70°) | 2 | 1.26:1 | 0% | | Green (70–165°) | 9 | 2:1 | 33.3% | | Cyan (165–200°) | 2 | 2.54:1 | 0% | | Orange (15–45°) | 10 | 3.26:1 | 20% | | Red (345–15°) | 9 | 4.36:1 | 44.4% | | Blue (200–260°) | 33 | 5.37:1 | 90.9% | | Purple (260–345°) | 5 | 9.5:1 | 100% | Yellow, green and cyan accents are close to unusable as a white-text surface — the median yellow in this sample scores 1.26:1, which is effectively invisible. Blue is the only band where a majority of accents can carry white text, which explains why it stays the default accent of the web. The practical rule: the lighter or more saturated toward yellow the accent, the more likely the label should be near-black . #### By category (small n, read as direction) | Category | n | median with white | passes 4.5:1 | fails 3:1 | | SaaS | 14 | 3.42:1 | 42.9% | 4 | | Social | 4 | 4.93:1 | 50% | 0 | | Devtools | 20 | 4.43:1 | 50% | 6 | | Education | 2 | 4:1 | 50% | 1 | | Travel | 3 | 4.58:1 | 66.7% | 0 | | Media | 8 | 4.71:1 | 75% | 2 | | AI | 4 | 6.47:1 | 75% | 0 | | Fintech | 7 | 6.04:1 | 85.7% | 1 | | Enterprise | 3 | 4.94:1 | 100% | 0 | | Ecommerce | 5 | 5.89:1 | 100% | 0 | SaaS and dev-tool sites — the categories with the most design-system investment — are also the ones whose accents most often fail with white text, because they favour vivid indigo and violet accents. Categories with two or three sites move entirely on one domain; do not rank them. #### Five accents at the bottom of the distribution | | Category | Accent | with white | with black | | Site 1 | Fintech | #CCFF00 | 1.18:1 | 17.87:1 | | Site 2 | Devtools | #FEEC7B | 1.2:1 | 17.5:1 | | Site 3 | SaaS | #FFE01B | 1.32:1 | 15.93:1 | | Site 4 | SaaS | #B4D1FF | 1.55:1 | 13.5:1 | | Site 5 | Devtools | #1CE783 | 1.64:1 | 12.81:1 | Sites are numbered rather than named. The number is a property of the extracted colour, not a verdict on the brand, and a single CSS token is a thin basis for naming anyone. Note the last column: every one of these accents is perfectly readable with black text. #### Five that carry white text well | | Category | Accent | with white | with black | | Site 1 | Devtools | #000C2A | 19.34:1 | 1.09:1 | | Site 2 | Social | #161823 | 17.66:1 | 1.19:1 | | Site 3 | AI | #141C2E | 17:1 | 1.24:1 | | Site 4 | Fintech | #112231 | 16.19:1 | 1.3:1 | | Site 5 | SaaS | #172B4D | 14.1:1 | 1.49:1 | #### If your accent is in the failing band - Try the label colour first. Switch white to #111827 . It costs nothing, keeps the brand colour, and clears 4.5:1 for most mid-tone accents. - Then darken the hue, not replace it. A 12–18% lightness reduction in OKLCH usually lifts a mid-tone accent past 4.5:1 while staying recognisable. - Split the token. Keep the pure brand colour for large text and decorative fills; ship a darkened step as --brand-text for body-size labels and links. - Do not rely on the eye. Every failure above was invisible to the person who shipped it. Measure the pair, not the swatch — you can do it in the contrast checker . - Build the ramp up front. A ten-step scale from one hex gives you a compliant step for each state; the shades generator produces it in one click. #### Method - Fetched each homepage and up to three linked stylesheets on 2026-11-11. - Counted every declared colour: hex, rgb() / rgba() , inline SVG fill , CSS colour keywords. - Kept chromatic candidates (saturation ≥ 0.30, lightness 0.12–0.88) and took the most frequent as the accent. - Weighted an explicit meta name="theme-color" six times — that tag is the site's own statement of its brand colour. - Computed WCAG 2.2 contrast with the relative-luminance formula against white and black. Limits. 26 of 96 sites were dropped: bot protection (HTTP 403/429), a page whose colour lives only in an image, or no chromatic declaration at all. This measures a declared CSS colour, not a rendered button, so treat it as a proxy for brand-colour legibility rather than a component-level audit. The sample is hand-picked well-known domains, not a traffic-weighted ranking. Download the CSV (70 rows) ``` node tools/brand-contrast-study.mjs . # crawl + measure node tools/gen-study-article.mjs . # rebuild this page from the data ``` © 2026 HexColor Pro · Home · About · Blog · Contrast checker · CSS colors --- ## #F0F8FF Alice Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/aliceblue ### #F0F8FF — Alice Blue Alice Blue is the CSS named color #F0F8FF — rgb(240, 248, 255), hsl(208, 100%, 97%). Its relative luminance is 0.929, giving 1.07:1 against white and 19.58:1 against black, so it works as a text color on black. #### Alice Blue in every notation | HEX | #F0F8FF | | RGB | rgb(240, 248, 255) | | HSL | hsl(208, 100%, 97%) | | Relative luminance | 0.9288 | | Contrast on white | 1.07:1 AA fail | | Contrast on black | 19.58:1 AA pass | #### Tints and shades of aliceblue #FDFEFF #FAFDFF #F6FBFF #F3F9FF #F0F8FF #CCD3D9 #A3A9AD #787C80 #4D4F52 Built by mixing aliceblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #F8F8FF Ghost White #F5F5F5 White Smoke #F0FFFF Azure Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for aliceblue? aliceblue is #F0F8FF, which is rgb(240, 248, 255) and hsl(208, 100%, 97%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is aliceblue light or dark? Alice Blue has a relative luminance of 0.929 on a 0–1 scale, so it is a light color. Against white it scores 1.07:1; against black, 19.58:1. ##### Can I use aliceblue for text? aliceblue reaches 19.58:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FAEBD7 Antique White — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/antiquewhite ### #FAEBD7 — Antique White Antique White is the CSS named color #FAEBD7 — rgb(250, 235, 215), hsl(34, 78%, 91%). Its relative luminance is 0.846, giving 1.17:1 against white and 17.93:1 against black, so it works as a text color on black. #### Antique White in every notation | HEX | #FAEBD7 | | RGB | rgb(250, 235, 215) | | HSL | hsl(34, 78%, 91%) | | Relative luminance | 0.8465 | | Contrast on white | 1.17:1 AA fail | | Contrast on black | 17.93:1 AA pass | #### Tints and shades of antiquewhite #FEFCF9 #FDF8F1 #FCF3E7 #FBEFDE #FAEBD7 #D5C8B7 #AAA092 #7D766C #504B45 Built by mixing antiquewhite toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFEFD5 Papaya Whip #FDF5E6 Old Lace #FFEBCD Blanched Almond Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for antiquewhite? antiquewhite is #FAEBD7, which is rgb(250, 235, 215) and hsl(34, 78%, 91%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is antiquewhite light or dark? Antique White has a relative luminance of 0.846 on a 0–1 scale, so it is a light color. Against white it scores 1.17:1; against black, 17.93:1. ##### Can I use antiquewhite for text? antiquewhite reaches 17.93:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #00FFFF Aqua — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/aqua ### #00FFFF — Aqua Aqua is the CSS named color #00FFFF — rgb(0, 255, 255), hsl(180, 100%, 50%). Its relative luminance is 0.787, giving 1.25:1 against white and 16.75:1 against black, so it works as a text color on black. #### Aqua in every notation | HEX | #00FFFF | | RGB | rgb(0, 255, 255) | | HSL | hsl(180, 100%, 50%) | | Relative luminance | 0.7874 | | Contrast on white | 1.25:1 AA fail | | Contrast on black | 16.75:1 AA pass | #### Tints and shades of aqua #D9FFFF #A6FFFF #66FFFF #2EFFFF #00FFFF #00D9D9 #00ADAD #008080 #005252 Built by mixing aqua toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #00FFFF Cyan #40E0D0 Turquoise #00CED1 Dark Turquoise Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for aqua? aqua is #00FFFF, which is rgb(0, 255, 255) and hsl(180, 100%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is aqua light or dark? Aqua has a relative luminance of 0.787 on a 0–1 scale, so it is a light color. Against white it scores 1.25:1; against black, 16.75:1. ##### Can I use aqua for text? aqua reaches 16.75:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #7FFFD4 Aquamarine — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/aquamarine ### #7FFFD4 — Aquamarine Aquamarine is the CSS named color #7FFFD4 — rgb(127, 255, 212), hsl(160, 100%, 75%). Its relative luminance is 0.808, giving 1.22:1 against white and 17.16:1 against black, so it works as a text color on black. #### Aquamarine in every notation | HEX | #7FFFD4 | | RGB | rgb(127, 255, 212) | | HSL | hsl(160, 100%, 75%) | | Relative luminance | 0.8079 | | Contrast on white | 1.22:1 AA fail | | Contrast on black | 17.16:1 AA pass | #### Tints and shades of aquamarine #ECFFF9 #D2FFF0 #B2FFE5 #96FFDC #7FFFD4 #6CD9B4 #56AD90 #40806A #295244 Built by mixing aquamarine toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #40E0D0 Turquoise #66CDAA Medium Aquamarine #00FFFF Aqua Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for aquamarine? aquamarine is #7FFFD4, which is rgb(127, 255, 212) and hsl(160, 100%, 75%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is aquamarine light or dark? Aquamarine has a relative luminance of 0.808 on a 0–1 scale, so it is a light color. Against white it scores 1.22:1; against black, 17.16:1. ##### Can I use aquamarine for text? aquamarine reaches 17.16:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #F0FFFF Azure — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/azure ### #F0FFFF — Azure Azure is the CSS named color #F0FFFF — rgb(240, 255, 255), hsl(180, 100%, 97%). Its relative luminance is 0.973, giving 1.03:1 against white and 20.45:1 against black, so it works as a text color on black. #### Azure in every notation | HEX | #F0FFFF | | RGB | rgb(240, 255, 255) | | HSL | hsl(180, 100%, 97%) | | Relative luminance | 0.9727 | | Contrast on white | 1.03:1 AA fail | | Contrast on black | 20.45:1 AA pass | #### Tints and shades of azure #FDFFFF #FAFFFF #F6FFFF #F3FFFF #F0FFFF #CCD9D9 #A3ADAD #788080 #4D5252 Built by mixing azure toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #F5FFFA Mint Cream #F0F8FF Alice Blue #FFFFFF White Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for azure? azure is #F0FFFF, which is rgb(240, 255, 255) and hsl(180, 100%, 97%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is azure light or dark? Azure has a relative luminance of 0.973 on a 0–1 scale, so it is a light color. Against white it scores 1.03:1; against black, 20.45:1. ##### Can I use azure for text? azure reaches 20.45:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #F5F5DC Beige — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/beige ### #F5F5DC — Beige Beige is the CSS named color #F5F5DC — rgb(245, 245, 220), hsl(60, 56%, 91%). Its relative luminance is 0.899, giving 1.11:1 against white and 18.98:1 against black, so it works as a text color on black. #### Beige in every notation | HEX | #F5F5DC | | RGB | rgb(245, 245, 220) | | HSL | hsl(60, 56%, 91%) | | Relative luminance | 0.8988 | | Contrast on white | 1.11:1 AA fail | | Contrast on black | 18.98:1 AA pass | #### Tints and shades of beige #FEFEFA #FCFCF3 #F9F9EA #F7F7E2 #F5F5DC #D0D0BB #A7A796 #7B7B6E #4E4E46 Built by mixing beige toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFF8DC Cornsilk #FFFFE0 Light Yellow #FDF5E6 Old Lace Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for beige? beige is #F5F5DC, which is rgb(245, 245, 220) and hsl(60, 56%, 91%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is beige light or dark? Beige has a relative luminance of 0.899 on a 0–1 scale, so it is a light color. Against white it scores 1.11:1; against black, 18.98:1. ##### Can I use beige for text? beige reaches 18.98:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFE4C4 Bisque — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/bisque ### #FFE4C4 — Bisque Bisque is the CSS named color #FFE4C4 — rgb(255, 228, 196), hsl(33, 100%, 88%). Its relative luminance is 0.807, giving 1.22:1 against white and 17.15:1 against black, so it works as a text color on black. #### Bisque in every notation | HEX | #FFE4C4 | | RGB | rgb(255, 228, 196) | | HSL | hsl(33, 100%, 88%) | | Relative luminance | 0.8073 | | Contrast on white | 1.22:1 AA fail | | Contrast on black | 17.15:1 AA pass | #### Tints and shades of bisque #FFFBF6 #FFF6EA #FFEFDC #FFE9CF #FFE4C4 #D9C2A7 #AD9B85 #807262 #52493F Built by mixing bisque toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFEBCD Blanched Almond #FFDAB9 Peach Puff #FFEFD5 Papaya Whip Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for bisque? bisque is #FFE4C4, which is rgb(255, 228, 196) and hsl(33, 100%, 88%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is bisque light or dark? Bisque has a relative luminance of 0.807 on a 0–1 scale, so it is a light color. Against white it scores 1.22:1; against black, 17.15:1. ##### Can I use bisque for text? bisque reaches 17.15:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #000000 Black — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/black ### #000000 — Black Black is the CSS named color #000000 — rgb(0, 0, 0), hsl(0, 0%, 0%). Its relative luminance is 0.000, giving 21.00:1 against white and 1.00:1 against black, so it works as a text color on white. #### Black in every notation | HEX | #000000 | | RGB | rgb(0, 0, 0) | | HSL | hsl(0, 0%, 0%) | | Relative luminance | 0.0000 | | Contrast on white | 21.00:1 AA pass | | Contrast on black | 1.00:1 AA fail | #### Tints and shades of black #D9D9D9 #A6A6A6 #666666 #2E2E2E #000000 #000000 #000000 #000000 #000000 Built by mixing black toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #2F4F4F Dark Slate Gray #2F4F4F Dark Slate Grey #696969 Dim Gray Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for black? black is #000000, which is rgb(0, 0, 0) and hsl(0, 0%, 0%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is black light or dark? Black has a relative luminance of 0.000 on a 0–1 scale, so it is a dark color. Against white it scores 21.00:1; against black, 1.00:1. ##### Can I use black for text? black reaches 21.00:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFEBCD Blanched Almond — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/blanchedalmond ### #FFEBCD — Blanched Almond Blanched Almond is the CSS named color #FFEBCD — rgb(255, 235, 205), hsl(36, 100%, 90%). Its relative luminance is 0.851, giving 1.17:1 against white and 18.02:1 against black, so it works as a text color on black. #### Blanched Almond in every notation | HEX | #FFEBCD | | RGB | rgb(255, 235, 205) | | HSL | hsl(36, 100%, 90%) | | Relative luminance | 0.8508 | | Contrast on white | 1.17:1 AA fail | | Contrast on black | 18.02:1 AA pass | #### Tints and shades of blanchedalmond #FFFCF8 #FFF8EE #FFF3E1 #FFEFD6 #FFEBCD #D9C8AE #ADA08B #807667 #524B42 Built by mixing blanchedalmond toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFEFD5 Papaya Whip #FFE4C4 Bisque #FAEBD7 Antique White Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for blanchedalmond? blanchedalmond is #FFEBCD, which is rgb(255, 235, 205) and hsl(36, 100%, 90%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is blanchedalmond light or dark? Blanched Almond has a relative luminance of 0.851 on a 0–1 scale, so it is a light color. Against white it scores 1.17:1; against black, 18.02:1. ##### Can I use blanchedalmond for text? blanchedalmond reaches 18.02:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #0000FF Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/blue ### #0000FF — Blue Blue is the CSS named color #0000FF — rgb(0, 0, 255), hsl(240, 100%, 50%). Its relative luminance is 0.072, giving 8.59:1 against white and 2.44:1 against black, so it works as a text color on white. #### Blue in every notation | HEX | #0000FF | | RGB | rgb(0, 0, 255) | | HSL | hsl(240, 100%, 50%) | | Relative luminance | 0.0722 | | Contrast on white | 8.59:1 AA pass | | Contrast on black | 2.44:1 AA fail | #### Tints and shades of blue #D9D9FF #A6A6FF #6666FF #2E2EFF #0000FF #0000D9 #0000AD #000080 #000052 Built by mixing blue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #0000CD Medium Blue #8A2BE2 Blue Violet #9400D3 Dark Violet Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for blue? blue is #0000FF, which is rgb(0, 0, 255) and hsl(240, 100%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is blue light or dark? Blue has a relative luminance of 0.072 on a 0–1 scale, so it is a dark color. Against white it scores 8.59:1; against black, 2.44:1. ##### Can I use blue for text? blue reaches 8.59:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #8A2BE2 Blue Violet — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/blueviolet ### #8A2BE2 — Blue Violet Blue Violet is the CSS named color #8A2BE2 — rgb(138, 43, 226), hsl(271, 76%, 53%). Its relative luminance is 0.126, giving 5.96:1 against white and 3.52:1 against black, so it works as a text color on white. #### Blue Violet in every notation | HEX | #8A2BE2 | | RGB | rgb(138, 43, 226) | | HSL | hsl(271, 76%, 53%) | | Relative luminance | 0.1262 | | Contrast on white | 5.96:1 AA pass | | Contrast on black | 3.52:1 large text only | #### Tints and shades of blueviolet #EDDFFB #D6B5F5 #B980EE #9F51E7 #8A2BE2 #7525C0 #5E1D9A #451671 #2C0E48 Built by mixing blueviolet toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #9400D3 Dark Violet #9932CC Dark Orchid #0000CD Medium Blue Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for blueviolet? blueviolet is #8A2BE2, which is rgb(138, 43, 226) and hsl(271, 76%, 53%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is blueviolet light or dark? Blue Violet has a relative luminance of 0.126 on a 0–1 scale, so it is a dark color. Against white it scores 5.96:1; against black, 3.52:1. ##### Can I use blueviolet for text? blueviolet reaches 5.96:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #A52A2A Brown — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/brown ### #A52A2A — Brown Brown is the CSS named color #A52A2A — rgb(165, 42, 42), hsl(0, 59%, 41%). Its relative luminance is 0.098, giving 7.08:1 against white and 2.96:1 against black, so it works as a text color on white. #### Brown in every notation | HEX | #A52A2A | | RGB | rgb(165, 42, 42) | | HSL | hsl(0, 59%, 41%) | | Relative luminance | 0.0982 | | Contrast on white | 7.08:1 AA pass | | Contrast on black | 2.96:1 AA fail | #### Tints and shades of brown #F2DFDF #E0B4B4 #C97F7F #B55050 #A52A2A #8C2424 #701D1D #531515 #350D0D Built by mixing brown toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #B22222 Firebrick #800000 Maroon #8B0000 Dark Red Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for brown? brown is #A52A2A, which is rgb(165, 42, 42) and hsl(0, 59%, 41%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is brown light or dark? Brown has a relative luminance of 0.098 on a 0–1 scale, so it is a dark color. Against white it scores 7.08:1; against black, 2.96:1. ##### Can I use brown for text? brown reaches 7.08:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #DEB887 Burlywood — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/burlywood ### #DEB887 — Burlywood Burlywood is the CSS named color #DEB887 — rgb(222, 184, 135), hsl(34, 57%, 70%). Its relative luminance is 0.516, giving 1.86:1 against white and 11.31:1 against black, so it works as a text color on black. #### Burlywood in every notation | HEX | #DEB887 | | RGB | rgb(222, 184, 135) | | HSL | hsl(34, 57%, 70%) | | Relative luminance | 0.5156 | | Contrast on white | 1.86:1 AA fail | | Contrast on black | 11.31:1 AA pass | #### Tints and shades of burlywood #FAF4ED #F3E6D5 #EBD4B7 #E4C59D #DEB887 #BD9C73 #977D5C #6F5C44 #473B2B Built by mixing burlywood toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #D2B48C Tan #FFDEAD Navajo White #F5DEB3 Wheat Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for burlywood? burlywood is #DEB887, which is rgb(222, 184, 135) and hsl(34, 57%, 70%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is burlywood light or dark? Burlywood has a relative luminance of 0.516 on a 0–1 scale, so it is a light color. Against white it scores 1.86:1; against black, 11.31:1. ##### Can I use burlywood for text? burlywood reaches 11.31:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #5F9EA0 Cadet Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/cadetblue ### #5F9EA0 — Cadet Blue Cadet Blue is the CSS named color #5F9EA0 — rgb(95, 158, 160), hsl(182, 25%, 50%). Its relative luminance is 0.294, giving 3.05:1 against white and 6.88:1 against black, so it works as a text color on black. #### Cadet Blue in every notation | HEX | #5F9EA0 | | RGB | rgb(95, 158, 160) | | HSL | hsl(182, 25%, 50%) | | Relative luminance | 0.2942 | | Contrast on white | 3.05:1 large text only | | Contrast on black | 6.88:1 AA pass | #### Tints and shades of cadetblue #E7F0F1 #C7DDDE #9FC5C6 #7CAFB1 #5F9EA0 #518688 #416B6D #304F50 #1E3333 Built by mixing cadetblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #008B8B Dark Cyan #008080 Teal #20B2AA Light Sea Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for cadetblue? cadetblue is #5F9EA0, which is rgb(95, 158, 160) and hsl(182, 25%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is cadetblue light or dark? Cadet Blue has a relative luminance of 0.294 on a 0–1 scale, so it is a dark color. Against white it scores 3.05:1; against black, 6.88:1. ##### Can I use cadetblue for text? cadetblue reaches 6.88:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #7FFF00 Chartreuse — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/chartreuse ### #7FFF00 — Chartreuse Chartreuse is the CSS named color #7FFF00 — rgb(127, 255, 0), hsl(90, 100%, 50%). Its relative luminance is 0.760, giving 1.30:1 against white and 16.21:1 against black, so it works as a text color on black. #### Chartreuse in every notation | HEX | #7FFF00 | | RGB | rgb(127, 255, 0) | | HSL | hsl(90, 100%, 50%) | | Relative luminance | 0.7603 | | Contrast on white | 1.30:1 AA fail | | Contrast on black | 16.21:1 AA pass | #### Tints and shades of chartreuse #ECFFD9 #D2FFA6 #B2FF66 #96FF2E #7FFF00 #6CD900 #56AD00 #408000 #295200 Built by mixing chartreuse toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #7CFC00 Lawn Green #ADFF2F Green Yellow #00FF00 Lime Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for chartreuse? chartreuse is #7FFF00, which is rgb(127, 255, 0) and hsl(90, 100%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is chartreuse light or dark? Chartreuse has a relative luminance of 0.760 on a 0–1 scale, so it is a light color. Against white it scores 1.30:1; against black, 16.21:1. ##### Can I use chartreuse for text? chartreuse reaches 16.21:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #D2691E Chocolate — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/chocolate ### #D2691E — Chocolate Chocolate is the CSS named color #D2691E — rgb(210, 105, 30), hsl(25, 75%, 47%). Its relative luminance is 0.239, giving 3.63:1 against white and 5.78:1 against black, so it works as a text color on black. #### Chocolate in every notation | HEX | #D2691E | | RGB | rgb(210, 105, 30) | | HSL | hsl(25, 75%, 47%) | | Relative luminance | 0.2390 | | Contrast on white | 3.63:1 large text only | | Contrast on black | 5.78:1 AA pass | #### Tints and shades of chocolate #F8E9DD #EFCBB0 #E4A578 #DA8447 #D2691E #B3591A #8F4714 #69350F #43220A Built by mixing chocolate toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FF7F50 Coral #CD853F Peru #FF8C00 Dark Orange Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for chocolate? chocolate is #D2691E, which is rgb(210, 105, 30) and hsl(25, 75%, 47%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is chocolate light or dark? Chocolate has a relative luminance of 0.239 on a 0–1 scale, so it is a dark color. Against white it scores 3.63:1; against black, 5.78:1. ##### Can I use chocolate for text? chocolate reaches 5.78:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FF7F50 Coral — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/coral ### #FF7F50 — Coral Coral is the CSS named color #FF7F50 — rgb(255, 127, 80), hsl(16, 100%, 66%). Its relative luminance is 0.370, giving 2.50:1 against white and 8.40:1 against black, so it works as a text color on black. #### Coral in every notation | HEX | #FF7F50 | | RGB | rgb(255, 127, 80) | | HSL | hsl(16, 100%, 66%) | | Relative luminance | 0.3702 | | Contrast on white | 2.50:1 AA fail | | Contrast on black | 8.40:1 AA pass | #### Tints and shades of coral #FFECE5 #FFD2C2 #FFB296 #FF9670 #FF7F50 #D96C44 #AD5636 #804028 #52291A Built by mixing coral toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FF6347 Tomato #D2691E Chocolate #FA8072 Salmon Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for coral? coral is #FF7F50, which is rgb(255, 127, 80) and hsl(16, 100%, 66%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is coral light or dark? Coral has a relative luminance of 0.370 on a 0–1 scale, so it is a dark color. Against white it scores 2.50:1; against black, 8.40:1. ##### Can I use coral for text? coral reaches 8.40:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #6495ED Cornflower Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/cornflowerblue ### #6495ED — Cornflower Blue Cornflower Blue is the CSS named color #6495ED — rgb(100, 149, 237), hsl(219, 79%, 66%). Its relative luminance is 0.303, giving 2.97:1 against white and 7.06:1 against black, so it works as a text color on black. #### Cornflower Blue in every notation | HEX | #6495ED | | RGB | rgb(100, 149, 237) | | HSL | hsl(219, 79%, 66%) | | Relative luminance | 0.3032 | | Contrast on white | 2.97:1 AA fail | | Contrast on black | 7.06:1 AA pass | #### Tints and shades of cornflowerblue #E8EFFC #C9DAF9 #A2BFF4 #80A8F0 #6495ED #557FC9 #4465A1 #324B77 #20304C Built by mixing cornflowerblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #1E90FF Dodger Blue #4682B4 Steel Blue #4169E1 Royal Blue Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for cornflowerblue? cornflowerblue is #6495ED, which is rgb(100, 149, 237) and hsl(219, 79%, 66%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is cornflowerblue light or dark? Cornflower Blue has a relative luminance of 0.303 on a 0–1 scale, so it is a dark color. Against white it scores 2.97:1; against black, 7.06:1. ##### Can I use cornflowerblue for text? cornflowerblue reaches 7.06:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFF8DC Cornsilk — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/cornsilk ### #FFF8DC — Cornsilk Cornsilk is the CSS named color #FFF8DC — rgb(255, 248, 220), hsl(48, 100%, 93%). Its relative luminance is 0.936, giving 1.07:1 against white and 19.71:1 against black, so it works as a text color on black. #### Cornsilk in every notation | HEX | #FFF8DC | | RGB | rgb(255, 248, 220) | | HSL | hsl(48, 100%, 93%) | | Relative luminance | 0.9356 | | Contrast on white | 1.07:1 AA fail | | Contrast on black | 19.71:1 AA pass | #### Tints and shades of cornsilk #FFFEFA #FFFDF3 #FFFBEA #FFF9E2 #FFF8DC #D9D3BB #ADA996 #807C6E #524F46 Built by mixing cornsilk toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #F5F5DC Beige #FFFFE0 Light Yellow #FFEFD5 Papaya Whip Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for cornsilk? cornsilk is #FFF8DC, which is rgb(255, 248, 220) and hsl(48, 100%, 93%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is cornsilk light or dark? Cornsilk has a relative luminance of 0.936 on a 0–1 scale, so it is a light color. Against white it scores 1.07:1; against black, 19.71:1. ##### Can I use cornsilk for text? cornsilk reaches 19.71:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #DC143C Crimson — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/crimson ### #DC143C — Crimson Crimson is the CSS named color #DC143C — rgb(220, 20, 60), hsl(348, 83%, 47%). Its relative luminance is 0.160, giving 4.99:1 against white and 4.21:1 against black, so it works as a text color on white. #### Crimson in every notation | HEX | #DC143C | | RGB | rgb(220, 20, 60) | | HSL | hsl(348, 83%, 47%) | | Relative luminance | 0.1604 | | Contrast on white | 4.99:1 AA pass | | Contrast on black | 4.21:1 large text only | #### Tints and shades of crimson #FADCE2 #F3ADBB #EA728A #E23E5F #DC143C #BB1133 #960E29 #6E0A1E #460613 Built by mixing crimson toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #B22222 Firebrick #A52A2A Brown #FF6347 Tomato Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for crimson? crimson is #DC143C, which is rgb(220, 20, 60) and hsl(348, 83%, 47%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is crimson light or dark? Crimson has a relative luminance of 0.160 on a 0–1 scale, so it is a dark color. Against white it scores 4.99:1; against black, 4.21:1. ##### Can I use crimson for text? crimson reaches 4.99:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #00FFFF Cyan — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/cyan ### #00FFFF — Cyan Cyan is the CSS named color #00FFFF — rgb(0, 255, 255), hsl(180, 100%, 50%). Its relative luminance is 0.787, giving 1.25:1 against white and 16.75:1 against black, so it works as a text color on black. #### Cyan in every notation | HEX | #00FFFF | | RGB | rgb(0, 255, 255) | | HSL | hsl(180, 100%, 50%) | | Relative luminance | 0.7874 | | Contrast on white | 1.25:1 AA fail | | Contrast on black | 16.75:1 AA pass | #### Tints and shades of cyan #D9FFFF #A6FFFF #66FFFF #2EFFFF #00FFFF #00D9D9 #00ADAD #008080 #005252 Built by mixing cyan toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #00FFFF Aqua #40E0D0 Turquoise #00CED1 Dark Turquoise Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for cyan? cyan is #00FFFF, which is rgb(0, 255, 255) and hsl(180, 100%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is cyan light or dark? Cyan has a relative luminance of 0.787 on a 0–1 scale, so it is a light color. Against white it scores 1.25:1; against black, 16.75:1. ##### Can I use cyan for text? cyan reaches 16.75:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #00008B Dark Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkblue ### #00008B — Dark Blue Dark Blue is the CSS named color #00008B — rgb(0, 0, 139), hsl(240, 100%, 27%). Its relative luminance is 0.019, giving 15.30:1 against white and 1.37:1 against black, so it works as a text color on white. #### Dark Blue in every notation | HEX | #00008B | | RGB | rgb(0, 0, 139) | | HSL | hsl(240, 100%, 27%) | | Relative luminance | 0.0186 | | Contrast on white | 15.30:1 AA pass | | Contrast on black | 1.37:1 AA fail | #### Tints and shades of darkblue #D9D9EE #A6A6D6 #6666B9 #2E2EA0 #00008B #000076 #00005F #000046 #00002C Built by mixing darkblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #000080 Navy #4B0082 Indigo #191970 Midnight Blue Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkblue? darkblue is #00008B, which is rgb(0, 0, 139) and hsl(240, 100%, 27%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkblue light or dark? Dark Blue has a relative luminance of 0.019 on a 0–1 scale, so it is a dark color. Against white it scores 15.30:1; against black, 1.37:1. ##### Can I use darkblue for text? darkblue reaches 15.30:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #008B8B Dark Cyan — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkcyan ### #008B8B — Dark Cyan Dark Cyan is the CSS named color #008B8B — rgb(0, 139, 139), hsl(180, 100%, 27%). Its relative luminance is 0.203, giving 4.15:1 against white and 5.07:1 against black, so it works as a text color on black. #### Dark Cyan in every notation | HEX | #008B8B | | RGB | rgb(0, 139, 139) | | HSL | hsl(180, 100%, 27%) | | Relative luminance | 0.2033 | | Contrast on white | 4.15:1 large text only | | Contrast on black | 5.07:1 AA pass | #### Tints and shades of darkcyan #D9EEEE #A6D6D6 #66B9B9 #2EA0A0 #008B8B #007676 #005F5F #004646 #002C2C Built by mixing darkcyan toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #008080 Teal #5F9EA0 Cadet Blue #20B2AA Light Sea Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkcyan? darkcyan is #008B8B, which is rgb(0, 139, 139) and hsl(180, 100%, 27%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkcyan light or dark? Dark Cyan has a relative luminance of 0.203 on a 0–1 scale, so it is a dark color. Against white it scores 4.15:1; against black, 5.07:1. ##### Can I use darkcyan for text? darkcyan reaches 5.07:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #B8860B Dark Goldenrod — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkgoldenrod ### #B8860B — Dark Goldenrod Dark Goldenrod is the CSS named color #B8860B — rgb(184, 134, 11), hsl(43, 89%, 38%). Its relative luminance is 0.273, giving 3.25:1 against white and 6.45:1 against black, so it works as a text color on black. #### Dark Goldenrod in every notation | HEX | #B8860B | | RGB | rgb(184, 134, 11) | | HSL | hsl(43, 89%, 38%) | | Relative luminance | 0.2726 | | Contrast on white | 3.25:1 large text only | | Contrast on black | 6.45:1 AA pass | #### Tints and shades of darkgoldenrod #F4EDDA #E6D5AA #D4B66D #C59C37 #B8860B #9C7209 #7D5B07 #5C4306 #3B2B04 Built by mixing darkgoldenrod toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #DAA520 Goldenrod #CD853F Peru #808000 Olive Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkgoldenrod? darkgoldenrod is #B8860B, which is rgb(184, 134, 11) and hsl(43, 89%, 38%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkgoldenrod light or dark? Dark Goldenrod has a relative luminance of 0.273 on a 0–1 scale, so it is a dark color. Against white it scores 3.25:1; against black, 6.45:1. ##### Can I use darkgoldenrod for text? darkgoldenrod reaches 6.45:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #A9A9A9 Dark Gray — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkgray ### #A9A9A9 — Dark Gray Dark Gray is the CSS named color #A9A9A9 — rgb(169, 169, 169), hsl(0, 0%, 66%). Its relative luminance is 0.397, giving 2.35:1 against white and 8.94:1 against black, so it works as a text color on black. #### Dark Gray in every notation | HEX | #A9A9A9 | | RGB | rgb(169, 169, 169) | | HSL | hsl(0, 0%, 66%) | | Relative luminance | 0.3968 | | Contrast on white | 2.35:1 AA fail | | Contrast on black | 8.94:1 AA pass | #### Tints and shades of darkgray #F2F2F2 #E1E1E1 #CBCBCB #B8B8B8 #A9A9A9 #909090 #737373 #555555 #363636 Built by mixing darkgray toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #A9A9A9 Dark Grey #C0C0C0 Silver #D3D3D3 Light Gray Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkgray? darkgray is #A9A9A9, which is rgb(169, 169, 169) and hsl(0, 0%, 66%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkgray light or dark? Dark Gray has a relative luminance of 0.397 on a 0–1 scale, so it is a dark color. Against white it scores 2.35:1; against black, 8.94:1. ##### Can I use darkgray for text? darkgray reaches 8.94:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #006400 Dark Green — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkgreen ### #006400 — Dark Green Dark Green is the CSS named color #006400 — rgb(0, 100, 0), hsl(120, 100%, 20%). Its relative luminance is 0.091, giving 7.44:1 against white and 2.82:1 against black, so it works as a text color on white. #### Dark Green in every notation | HEX | #006400 | | RGB | rgb(0, 100, 0) | | HSL | hsl(120, 100%, 20%) | | Relative luminance | 0.0911 | | Contrast on white | 7.44:1 AA pass | | Contrast on black | 2.82:1 AA fail | #### Tints and shades of darkgreen #D9E8D9 #A6C9A6 #66A266 #2E802E #006400 #005500 #004400 #003200 #002000 Built by mixing darkgreen toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #008000 Green #228B22 Forest Green #6B8E23 Olive Drab Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkgreen? darkgreen is #006400, which is rgb(0, 100, 0) and hsl(120, 100%, 20%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkgreen light or dark? Dark Green has a relative luminance of 0.091 on a 0–1 scale, so it is a dark color. Against white it scores 7.44:1; against black, 2.82:1. ##### Can I use darkgreen for text? darkgreen reaches 7.44:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #A9A9A9 Dark Grey — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkgrey ### #A9A9A9 — Dark Grey Dark Grey is the CSS named color #A9A9A9 — rgb(169, 169, 169), hsl(0, 0%, 66%). Its relative luminance is 0.397, giving 2.35:1 against white and 8.94:1 against black, so it works as a text color on black. #### Dark Grey in every notation | HEX | #A9A9A9 | | RGB | rgb(169, 169, 169) | | HSL | hsl(0, 0%, 66%) | | Relative luminance | 0.3968 | | Contrast on white | 2.35:1 AA fail | | Contrast on black | 8.94:1 AA pass | #### Tints and shades of darkgrey #F2F2F2 #E1E1E1 #CBCBCB #B8B8B8 #A9A9A9 #909090 #737373 #555555 #363636 Built by mixing darkgrey toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #A9A9A9 Dark Gray #C0C0C0 Silver #D3D3D3 Light Gray Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkgrey? darkgrey is #A9A9A9, which is rgb(169, 169, 169) and hsl(0, 0%, 66%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkgrey light or dark? Dark Grey has a relative luminance of 0.397 on a 0–1 scale, so it is a dark color. Against white it scores 2.35:1; against black, 8.94:1. ##### Can I use darkgrey for text? darkgrey reaches 8.94:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #BDB76B Dark Khaki — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkkhaki ### #BDB76B — Dark Khaki Dark Khaki is the CSS named color #BDB76B — rgb(189, 183, 107), hsl(56, 38%, 58%). Its relative luminance is 0.457, giving 2.07:1 against white and 10.15:1 against black, so it works as a text color on black. #### Dark Khaki in every notation | HEX | #BDB76B | | RGB | rgb(189, 183, 107) | | HSL | hsl(56, 38%, 58%) | | Relative luminance | 0.4575 | | Contrast on white | 2.07:1 AA fail | | Contrast on black | 10.15:1 AA pass | #### Tints and shades of darkkhaki #F5F4E9 #E8E6CB #D7D4A6 #C9C486 #BDB76B #A19C5B #817C49 #5F5C36 #3C3B22 Built by mixing darkkhaki toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #F0E68C Khaki #DEB887 Burlywood #EEE8AA Pale Goldenrod Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkkhaki? darkkhaki is #BDB76B, which is rgb(189, 183, 107) and hsl(56, 38%, 58%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkkhaki light or dark? Dark Khaki has a relative luminance of 0.457 on a 0–1 scale, so it is a dark color. Against white it scores 2.07:1; against black, 10.15:1. ##### Can I use darkkhaki for text? darkkhaki reaches 10.15:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #8B008B Dark Magenta — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkmagenta ### #8B008B — Dark Magenta Dark Magenta is the CSS named color #8B008B — rgb(139, 0, 139), hsl(300, 100%, 27%). Its relative luminance is 0.074, giving 8.50:1 against white and 2.47:1 against black, so it works as a text color on white. #### Dark Magenta in every notation | HEX | #8B008B | | RGB | rgb(139, 0, 139) | | HSL | hsl(300, 100%, 27%) | | Relative luminance | 0.0735 | | Contrast on white | 8.50:1 AA pass | | Contrast on black | 2.47:1 AA fail | #### Tints and shades of darkmagenta #EED9EE #D6A6D6 #B966B9 #A02EA0 #8B008B #760076 #5F005F #460046 #2C002C Built by mixing darkmagenta toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #800080 Purple #663399 Rebecca Purple #4B0082 Indigo Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkmagenta? darkmagenta is #8B008B, which is rgb(139, 0, 139) and hsl(300, 100%, 27%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkmagenta light or dark? Dark Magenta has a relative luminance of 0.074 on a 0–1 scale, so it is a dark color. Against white it scores 8.50:1; against black, 2.47:1. ##### Can I use darkmagenta for text? darkmagenta reaches 8.50:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #556B2F Dark Olive Green — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkolivegreen ### #556B2F — Dark Olive Green Dark Olive Green is the CSS named color #556B2F — rgb(85, 107, 47), hsl(82, 39%, 30%). Its relative luminance is 0.127, giving 5.95:1 against white and 3.53:1 against black, so it works as a text color on white. #### Dark Olive Green in every notation | HEX | #556B2F | | RGB | rgb(85, 107, 47) | | HSL | hsl(82, 39%, 30%) | | Relative luminance | 0.1265 | | Contrast on white | 5.95:1 AA pass | | Contrast on black | 3.53:1 large text only | #### Tints and shades of darkolivegreen #E6E9E0 #C4CBB6 #99A682 #748654 #556B2F #485B28 #3A4920 #2B3618 #1B220F Built by mixing darkolivegreen toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #6B8E23 Olive Drab #2E8B57 Sea Green #006400 Dark Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkolivegreen? darkolivegreen is #556B2F, which is rgb(85, 107, 47) and hsl(82, 39%, 30%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkolivegreen light or dark? Dark Olive Green has a relative luminance of 0.127 on a 0–1 scale, so it is a dark color. Against white it scores 5.95:1; against black, 3.53:1. ##### Can I use darkolivegreen for text? darkolivegreen reaches 5.95:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FF8C00 Dark Orange — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkorange ### #FF8C00 — Dark Orange Dark Orange is the CSS named color #FF8C00 — rgb(255, 140, 0), hsl(33, 100%, 50%). Its relative luminance is 0.400, giving 2.33:1 against white and 9.00:1 against black, so it works as a text color on black. #### Dark Orange in every notation | HEX | #FF8C00 | | RGB | rgb(255, 140, 0) | | HSL | hsl(33, 100%, 50%) | | Relative luminance | 0.4002 | | Contrast on white | 2.33:1 AA fail | | Contrast on black | 9.00:1 AA pass | #### Tints and shades of darkorange #FFEED9 #FFD7A6 #FFBA66 #FFA12E #FF8C00 #D97700 #AD5F00 #804600 #522D00 Built by mixing darkorange toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFA500 Orange #D2691E Chocolate #DAA520 Goldenrod Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkorange? darkorange is #FF8C00, which is rgb(255, 140, 0) and hsl(33, 100%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkorange light or dark? Dark Orange has a relative luminance of 0.400 on a 0–1 scale, so it is a dark color. Against white it scores 2.33:1; against black, 9.00:1. ##### Can I use darkorange for text? darkorange reaches 9.00:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #9932CC Dark Orchid — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkorchid ### #9932CC — Dark Orchid Dark Orchid is the CSS named color #9932CC — rgb(153, 50, 204), hsl(280, 61%, 50%). Its relative luminance is 0.134, giving 5.70:1 against white and 3.68:1 against black, so it works as a text color on white. #### Dark Orchid in every notation | HEX | #9932CC | | RGB | rgb(153, 50, 204) | | HSL | hsl(280, 61%, 50%) | | Relative luminance | 0.1341 | | Contrast on white | 5.70:1 AA pass | | Contrast on black | 3.68:1 large text only | #### Tints and shades of darkorchid #F0E0F7 #DBB7ED #C284E0 #AB57D5 #9932CC #822BAD #68228B #4D1966 #311041 Built by mixing darkorchid toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #8A2BE2 Blue Violet #9400D3 Dark Violet #BA55D3 Medium Orchid Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkorchid? darkorchid is #9932CC, which is rgb(153, 50, 204) and hsl(280, 61%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkorchid light or dark? Dark Orchid has a relative luminance of 0.134 on a 0–1 scale, so it is a dark color. Against white it scores 5.70:1; against black, 3.68:1. ##### Can I use darkorchid for text? darkorchid reaches 5.70:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #8B0000 Dark Red — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkred ### #8B0000 — Dark Red Dark Red is the CSS named color #8B0000 — rgb(139, 0, 0), hsl(0, 100%, 27%). Its relative luminance is 0.055, giving 10.01:1 against white and 2.10:1 against black, so it works as a text color on white. #### Dark Red in every notation | HEX | #8B0000 | | RGB | rgb(139, 0, 0) | | HSL | hsl(0, 100%, 27%) | | Relative luminance | 0.0549 | | Contrast on white | 10.01:1 AA pass | | Contrast on black | 2.10:1 AA fail | #### Tints and shades of darkred #EED9D9 #D6A6A6 #B96666 #A02E2E #8B0000 #760000 #5F0000 #460000 #2C0000 Built by mixing darkred toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #800000 Maroon #B22222 Firebrick #A52A2A Brown Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkred? darkred is #8B0000, which is rgb(139, 0, 0) and hsl(0, 100%, 27%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkred light or dark? Dark Red has a relative luminance of 0.055 on a 0–1 scale, so it is a dark color. Against white it scores 10.01:1; against black, 2.10:1. ##### Can I use darkred for text? darkred reaches 10.01:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #E9967A Dark Salmon — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darksalmon ### #E9967A — Dark Salmon Dark Salmon is the CSS named color #E9967A — rgb(233, 150, 122), hsl(15, 72%, 70%). Its relative luminance is 0.405, giving 2.31:1 against white and 9.11:1 against black, so it works as a text color on black. #### Dark Salmon in every notation | HEX | #E9967A | | RGB | rgb(233, 150, 122) | | HSL | hsl(15, 72%, 70%) | | Relative luminance | 0.4054 | | Contrast on white | 2.31:1 AA fail | | Contrast on black | 9.11:1 AA pass | #### Tints and shades of darksalmon #FCEFEB #F7DAD0 #F2C0AF #EDA992 #E9967A #C68068 #9E6653 #754B3D #4B3027 Built by mixing darksalmon toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFA07A Light Salmon #F08080 Light Coral #FA8072 Salmon Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darksalmon? darksalmon is #E9967A, which is rgb(233, 150, 122) and hsl(15, 72%, 70%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darksalmon light or dark? Dark Salmon has a relative luminance of 0.405 on a 0–1 scale, so it is a dark color. Against white it scores 2.31:1; against black, 9.11:1. ##### Can I use darksalmon for text? darksalmon reaches 9.11:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #8FBC8F Dark Sea Green — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkseagreen ### #8FBC8F — Dark Sea Green Dark Sea Green is the CSS named color #8FBC8F — rgb(143, 188, 143), hsl(120, 25%, 65%). Its relative luminance is 0.438, giving 2.15:1 against white and 9.76:1 against black, so it works as a text color on black. #### Dark Sea Green in every notation | HEX | #8FBC8F | | RGB | rgb(143, 188, 143) | | HSL | hsl(120, 25%, 65%) | | Relative luminance | 0.4379 | | Contrast on white | 2.15:1 AA fail | | Contrast on black | 9.76:1 AA pass | #### Tints and shades of darkseagreen #EEF5EE #D8E8D8 #BCD7BC #A3C8A3 #8FBC8F #7AA07A #618061 #485E48 #2E3C2E Built by mixing darkseagreen toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #66CDAA Medium Aquamarine #2E8B57 Sea Green #BDB76B Dark Khaki Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkseagreen? darkseagreen is #8FBC8F, which is rgb(143, 188, 143) and hsl(120, 25%, 65%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkseagreen light or dark? Dark Sea Green has a relative luminance of 0.438 on a 0–1 scale, so it is a dark color. Against white it scores 2.15:1; against black, 9.76:1. ##### Can I use darkseagreen for text? darkseagreen reaches 9.76:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #483D8B Dark Slate Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkslateblue ### #483D8B — Dark Slate Blue Dark Slate Blue is the CSS named color #483D8B — rgb(72, 61, 139), hsl(248, 39%, 39%). Its relative luminance is 0.066, giving 9.07:1 against white and 2.32:1 against black, so it works as a text color on white. #### Dark Slate Blue in every notation | HEX | #483D8B | | RGB | rgb(72, 61, 139) | | HSL | hsl(248, 39%, 39%) | | Relative luminance | 0.0658 | | Contrast on white | 9.07:1 AA pass | | Contrast on black | 2.32:1 AA fail | #### Tints and shades of darkslateblue #E4E2EE #BFBBD6 #918BB9 #6960A0 #483D8B #3D3476 #31295F #241F46 #17142C Built by mixing darkslateblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #191970 Midnight Blue #663399 Rebecca Purple #6A5ACD Slate Blue Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkslateblue? darkslateblue is #483D8B, which is rgb(72, 61, 139) and hsl(248, 39%, 39%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkslateblue light or dark? Dark Slate Blue has a relative luminance of 0.066 on a 0–1 scale, so it is a dark color. Against white it scores 9.07:1; against black, 2.32:1. ##### Can I use darkslateblue for text? darkslateblue reaches 9.07:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #2F4F4F Dark Slate Gray — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkslategray ### #2F4F4F — Dark Slate Gray Dark Slate Gray is the CSS named color #2F4F4F — rgb(47, 79, 79), hsl(180, 25%, 25%). Its relative luminance is 0.068, giving 8.93:1 against white and 2.35:1 against black, so it works as a text color on white. #### Dark Slate Gray in every notation | HEX | #2F4F4F | | RGB | rgb(47, 79, 79) | | HSL | hsl(180, 25%, 25%) | | Relative luminance | 0.0676 | | Contrast on white | 8.93:1 AA pass | | Contrast on black | 2.35:1 AA fail | #### Tints and shades of darkslategray #E0E5E5 #B6C1C1 #829595 #546F6F #2F4F4F #284343 #203636 #182828 #0F1919 Built by mixing darkslategray toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #2F4F4F Dark Slate Grey #696969 Dim Gray #696969 Dim Grey Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkslategray? darkslategray is #2F4F4F, which is rgb(47, 79, 79) and hsl(180, 25%, 25%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkslategray light or dark? Dark Slate Gray has a relative luminance of 0.068 on a 0–1 scale, so it is a dark color. Against white it scores 8.93:1; against black, 2.35:1. ##### Can I use darkslategray for text? darkslategray reaches 8.93:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #2F4F4F Dark Slate Grey — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkslategrey ### #2F4F4F — Dark Slate Grey Dark Slate Grey is the CSS named color #2F4F4F — rgb(47, 79, 79), hsl(180, 25%, 25%). Its relative luminance is 0.068, giving 8.93:1 against white and 2.35:1 against black, so it works as a text color on white. #### Dark Slate Grey in every notation | HEX | #2F4F4F | | RGB | rgb(47, 79, 79) | | HSL | hsl(180, 25%, 25%) | | Relative luminance | 0.0676 | | Contrast on white | 8.93:1 AA pass | | Contrast on black | 2.35:1 AA fail | #### Tints and shades of darkslategrey #E0E5E5 #B6C1C1 #829595 #546F6F #2F4F4F #284343 #203636 #182828 #0F1919 Built by mixing darkslategrey toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #2F4F4F Dark Slate Gray #696969 Dim Gray #696969 Dim Grey Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkslategrey? darkslategrey is #2F4F4F, which is rgb(47, 79, 79) and hsl(180, 25%, 25%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkslategrey light or dark? Dark Slate Grey has a relative luminance of 0.068 on a 0–1 scale, so it is a dark color. Against white it scores 8.93:1; against black, 2.35:1. ##### Can I use darkslategrey for text? darkslategrey reaches 8.93:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #00CED1 Dark Turquoise — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkturquoise ### #00CED1 — Dark Turquoise Dark Turquoise is the CSS named color #00CED1 — rgb(0, 206, 209), hsl(181, 100%, 41%). Its relative luminance is 0.487, giving 1.95:1 against white and 10.75:1 against black, so it works as a text color on black. #### Dark Turquoise in every notation | HEX | #00CED1 | | RGB | rgb(0, 206, 209) | | HSL | hsl(181, 100%, 41%) | | Relative luminance | 0.4875 | | Contrast on white | 1.95:1 AA fail | | Contrast on black | 10.75:1 AA pass | #### Tints and shades of darkturquoise #D9F8F8 #A6EEEF #66E2E3 #2ED7D9 #00CED1 #00AFB2 #008C8E #006769 #004243 Built by mixing darkturquoise toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #48D1CC Medium Turquoise #40E0D0 Turquoise #20B2AA Light Sea Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkturquoise? darkturquoise is #00CED1, which is rgb(0, 206, 209) and hsl(181, 100%, 41%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkturquoise light or dark? Dark Turquoise has a relative luminance of 0.487 on a 0–1 scale, so it is a dark color. Against white it scores 1.95:1; against black, 10.75:1. ##### Can I use darkturquoise for text? darkturquoise reaches 10.75:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #9400D3 Dark Violet — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/darkviolet ### #9400D3 — Dark Violet Dark Violet is the CSS named color #9400D3 — rgb(148, 0, 211), hsl(282, 100%, 41%). Its relative luminance is 0.110, giving 6.56:1 against white and 3.20:1 against black, so it works as a text color on white. #### Dark Violet in every notation | HEX | #9400D3 | | RGB | rgb(148, 0, 211) | | HSL | hsl(282, 100%, 41%) | | Relative luminance | 0.1100 | | Contrast on white | 6.56:1 AA pass | | Contrast on black | 3.20:1 large text only | #### Tints and shades of darkviolet #EFD9F8 #DAA6F0 #BF66E5 #A72EDB #9400D3 #7E00B3 #65008F #4A006A #2F0044 Built by mixing darkviolet toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #8A2BE2 Blue Violet #9932CC Dark Orchid #0000CD Medium Blue Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for darkviolet? darkviolet is #9400D3, which is rgb(148, 0, 211) and hsl(282, 100%, 41%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is darkviolet light or dark? Dark Violet has a relative luminance of 0.110 on a 0–1 scale, so it is a dark color. Against white it scores 6.56:1; against black, 3.20:1. ##### Can I use darkviolet for text? darkviolet reaches 6.56:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FF1493 Deep Pink — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/deeppink ### #FF1493 — Deep Pink Deep Pink is the CSS named color #FF1493 — rgb(255, 20, 147), hsl(328, 100%, 54%). Its relative luminance is 0.239, giving 3.64:1 against white and 5.77:1 against black, so it works as a text color on black. #### Deep Pink in every notation | HEX | #FF1493 | | RGB | rgb(255, 20, 147) | | HSL | hsl(328, 100%, 54%) | | Relative luminance | 0.2387 | | Contrast on white | 3.64:1 large text only | | Contrast on black | 5.77:1 AA pass | #### Tints and shades of deeppink #FFDCEF #FFADD9 #FF72BE #FF3EA6 #FF1493 #D9117D #AD0E64 #800A4A #52062F Built by mixing deeppink toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #C71585 Medium Violet Red #FF69B4 Hot Pink #DB7093 Pale Violet Red Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for deeppink? deeppink is #FF1493, which is rgb(255, 20, 147) and hsl(328, 100%, 54%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is deeppink light or dark? Deep Pink has a relative luminance of 0.239 on a 0–1 scale, so it is a dark color. Against white it scores 3.64:1; against black, 5.77:1. ##### Can I use deeppink for text? deeppink reaches 5.77:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #00BFFF Deep Sky Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/deepskyblue ### #00BFFF — Deep Sky Blue Deep Sky Blue is the CSS named color #00BFFF — rgb(0, 191, 255), hsl(195, 100%, 50%). Its relative luminance is 0.445, giving 2.12:1 against white and 9.90:1 against black, so it works as a text color on black. #### Deep Sky Blue in every notation | HEX | #00BFFF | | RGB | rgb(0, 191, 255) | | HSL | hsl(195, 100%, 50%) | | Relative luminance | 0.4448 | | Contrast on white | 2.12:1 AA fail | | Contrast on black | 9.90:1 AA pass | #### Tints and shades of deepskyblue #D9F5FF #A6E9FF #66D9FF #2ECBFF #00BFFF #00A2D9 #0082AD #006080 #003D52 Built by mixing deepskyblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #87CEFA Light Sky Blue #87CEEB Sky Blue #4682B4 Steel Blue Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for deepskyblue? deepskyblue is #00BFFF, which is rgb(0, 191, 255) and hsl(195, 100%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is deepskyblue light or dark? Deep Sky Blue has a relative luminance of 0.445 on a 0–1 scale, so it is a dark color. Against white it scores 2.12:1; against black, 9.90:1. ##### Can I use deepskyblue for text? deepskyblue reaches 9.90:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #696969 Dim Gray — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/dimgray ### #696969 — Dim Gray Dim Gray is the CSS named color #696969 — rgb(105, 105, 105), hsl(0, 0%, 41%). Its relative luminance is 0.141, giving 5.49:1 against white and 3.83:1 against black, so it works as a text color on white. #### Dim Gray in every notation | HEX | #696969 | | RGB | rgb(105, 105, 105) | | HSL | hsl(0, 0%, 41%) | | Relative luminance | 0.1413 | | Contrast on white | 5.49:1 AA pass | | Contrast on black | 3.83:1 large text only | #### Tints and shades of dimgray #E9E9E9 #CBCBCB #A5A5A5 #848484 #696969 #595959 #474747 #353535 #222222 Built by mixing dimgray toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #696969 Dim Grey #808080 Gray #808080 Grey Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for dimgray? dimgray is #696969, which is rgb(105, 105, 105) and hsl(0, 0%, 41%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is dimgray light or dark? Dim Gray has a relative luminance of 0.141 on a 0–1 scale, so it is a dark color. Against white it scores 5.49:1; against black, 3.83:1. ##### Can I use dimgray for text? dimgray reaches 5.49:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #696969 Dim Grey — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/dimgrey ### #696969 — Dim Grey Dim Grey is the CSS named color #696969 — rgb(105, 105, 105), hsl(0, 0%, 41%). Its relative luminance is 0.141, giving 5.49:1 against white and 3.83:1 against black, so it works as a text color on white. #### Dim Grey in every notation | HEX | #696969 | | RGB | rgb(105, 105, 105) | | HSL | hsl(0, 0%, 41%) | | Relative luminance | 0.1413 | | Contrast on white | 5.49:1 AA pass | | Contrast on black | 3.83:1 large text only | #### Tints and shades of dimgrey #E9E9E9 #CBCBCB #A5A5A5 #848484 #696969 #595959 #474747 #353535 #222222 Built by mixing dimgrey toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #696969 Dim Gray #808080 Gray #808080 Grey Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for dimgrey? dimgrey is #696969, which is rgb(105, 105, 105) and hsl(0, 0%, 41%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is dimgrey light or dark? Dim Grey has a relative luminance of 0.141 on a 0–1 scale, so it is a dark color. Against white it scores 5.49:1; against black, 3.83:1. ##### Can I use dimgrey for text? dimgrey reaches 5.49:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #1E90FF Dodger Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/dodgerblue ### #1E90FF — Dodger Blue Dodger Blue is the CSS named color #1E90FF — rgb(30, 144, 255), hsl(210, 100%, 56%). Its relative luminance is 0.274, giving 3.24:1 against white and 6.49:1 against black, so it works as a text color on black. #### Dodger Blue in every notation | HEX | #1E90FF | | RGB | rgb(30, 144, 255) | | HSL | hsl(210, 100%, 56%) | | Relative luminance | 0.2744 | | Contrast on white | 3.24:1 large text only | | Contrast on black | 6.49:1 AA pass | #### Tints and shades of dodgerblue #DDEEFF #B0D8FF #78BCFF #47A4FF #1E90FF #1A7AD9 #1462AD #0F4880 #0A2E52 Built by mixing dodgerblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #6495ED Cornflower Blue #4169E1 Royal Blue #6A5ACD Slate Blue Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for dodgerblue? dodgerblue is #1E90FF, which is rgb(30, 144, 255) and hsl(210, 100%, 56%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is dodgerblue light or dark? Dodger Blue has a relative luminance of 0.274 on a 0–1 scale, so it is a dark color. Against white it scores 3.24:1; against black, 6.49:1. ##### Can I use dodgerblue for text? dodgerblue reaches 6.49:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #B22222 Firebrick — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/firebrick ### #B22222 — Firebrick Firebrick is the CSS named color #B22222 — rgb(178, 34, 34), hsl(0, 68%, 42%). Its relative luminance is 0.107, giving 6.68:1 against white and 3.14:1 against black, so it works as a text color on white. #### Firebrick in every notation | HEX | #B22222 | | RGB | rgb(178, 34, 34) | | HSL | hsl(0, 68%, 42%) | | Relative luminance | 0.1072 | | Contrast on white | 6.68:1 AA pass | | Contrast on black | 3.14:1 large text only | #### Tints and shades of firebrick #F3DEDE #E4B2B2 #D17A7A #C04A4A #B22222 #971D1D #791717 #591111 #390B0B Built by mixing firebrick toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #A52A2A Brown #8B0000 Dark Red #800000 Maroon Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for firebrick? firebrick is #B22222, which is rgb(178, 34, 34) and hsl(0, 68%, 42%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is firebrick light or dark? Firebrick has a relative luminance of 0.107 on a 0–1 scale, so it is a dark color. Against white it scores 6.68:1; against black, 3.14:1. ##### Can I use firebrick for text? firebrick reaches 6.68:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFFAF0 Floral White — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/floralwhite ### #FFFAF0 — Floral White Floral White is the CSS named color #FFFAF0 — rgb(255, 250, 240), hsl(40, 100%, 97%). Its relative luminance is 0.959, giving 1.04:1 against white and 20.18:1 against black, so it works as a text color on black. #### Floral White in every notation | HEX | #FFFAF0 | | RGB | rgb(255, 250, 240) | | HSL | hsl(40, 100%, 97%) | | Relative luminance | 0.9592 | | Contrast on white | 1.04:1 AA fail | | Contrast on black | 20.18:1 AA pass | #### Tints and shades of floralwhite #FFFEFD #FFFDFA #FFFCF6 #FFFBF3 #FFFAF0 #D9D5CC #ADAAA3 #807D78 #52504D Built by mixing floralwhite toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFF5EE Seashell #FDF5E6 Old Lace #FFFFF0 Ivory Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for floralwhite? floralwhite is #FFFAF0, which is rgb(255, 250, 240) and hsl(40, 100%, 97%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is floralwhite light or dark? Floral White has a relative luminance of 0.959 on a 0–1 scale, so it is a light color. Against white it scores 1.04:1; against black, 20.18:1. ##### Can I use floralwhite for text? floralwhite reaches 20.18:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #228B22 Forest Green — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/forestgreen ### #228B22 — Forest Green Forest Green is the CSS named color #228B22 — rgb(34, 139, 34), hsl(120, 61%, 34%). Its relative luminance is 0.189, giving 4.39:1 against white and 4.78:1 against black, so it works as a text color on black. #### Forest Green in every notation | HEX | #228B22 | | RGB | rgb(34, 139, 34) | | HSL | hsl(120, 61%, 34%) | | Relative luminance | 0.1892 | | Contrast on white | 4.39:1 large text only | | Contrast on black | 4.78:1 AA pass | #### Tints and shades of forestgreen #DEEEDE #B2D6B2 #7AB97A #4AA04A #228B22 #1D761D #175F17 #114611 #0B2C0B Built by mixing forestgreen toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #008000 Green #006400 Dark Green #6B8E23 Olive Drab Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for forestgreen? forestgreen is #228B22, which is rgb(34, 139, 34) and hsl(120, 61%, 34%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is forestgreen light or dark? Forest Green has a relative luminance of 0.189 on a 0–1 scale, so it is a dark color. Against white it scores 4.39:1; against black, 4.78:1. ##### Can I use forestgreen for text? forestgreen reaches 4.78:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FF00FF Fuchsia — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/fuchsia ### #FF00FF — Fuchsia Fuchsia is the CSS named color #FF00FF — rgb(255, 0, 255), hsl(300, 100%, 50%). Its relative luminance is 0.285, giving 3.14:1 against white and 6.70:1 against black, so it works as a text color on black. #### Fuchsia in every notation | HEX | #FF00FF | | RGB | rgb(255, 0, 255) | | HSL | hsl(300, 100%, 50%) | | Relative luminance | 0.2848 | | Contrast on white | 3.14:1 large text only | | Contrast on black | 6.70:1 AA pass | #### Tints and shades of fuchsia #FFD9FF #FFA6FF #FF66FF #FF2EFF #FF00FF #D900D9 #AD00AD #800080 #520052 Built by mixing fuchsia toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FF00FF Magenta #9400D3 Dark Violet #8A2BE2 Blue Violet Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for fuchsia? fuchsia is #FF00FF, which is rgb(255, 0, 255) and hsl(300, 100%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is fuchsia light or dark? Fuchsia has a relative luminance of 0.285 on a 0–1 scale, so it is a dark color. Against white it scores 3.14:1; against black, 6.70:1. ##### Can I use fuchsia for text? fuchsia reaches 6.70:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #DCDCDC Gainsboro — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/gainsboro ### #DCDCDC — Gainsboro Gainsboro is the CSS named color #DCDCDC — rgb(220, 220, 220), hsl(0, 0%, 86%). Its relative luminance is 0.716, giving 1.37:1 against white and 15.31:1 against black, so it works as a text color on black. #### Gainsboro in every notation | HEX | #DCDCDC | | RGB | rgb(220, 220, 220) | | HSL | hsl(0, 0%, 86%) | | Relative luminance | 0.7157 | | Contrast on white | 1.37:1 AA fail | | Contrast on black | 15.31:1 AA pass | #### Tints and shades of gainsboro #FAFAFA #F3F3F3 #EAEAEA #E2E2E2 #DCDCDC #BBBBBB #969696 #6E6E6E #464646 Built by mixing gainsboro toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #D3D3D3 Light Gray #D3D3D3 Light Grey #F5F5F5 White Smoke Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for gainsboro? gainsboro is #DCDCDC, which is rgb(220, 220, 220) and hsl(0, 0%, 86%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is gainsboro light or dark? Gainsboro has a relative luminance of 0.716 on a 0–1 scale, so it is a light color. Against white it scores 1.37:1; against black, 15.31:1. ##### Can I use gainsboro for text? gainsboro reaches 15.31:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #F8F8FF Ghost White — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/ghostwhite ### #F8F8FF — Ghost White Ghost White is the CSS named color #F8F8FF — rgb(248, 248, 255), hsl(240, 100%, 99%). Its relative luminance is 0.943, giving 1.06:1 against white and 19.86:1 against black, so it works as a text color on black. #### Ghost White in every notation | HEX | #F8F8FF | | RGB | rgb(248, 248, 255) | | HSL | hsl(240, 100%, 99%) | | Relative luminance | 0.9431 | | Contrast on white | 1.06:1 AA fail | | Contrast on black | 19.86:1 AA pass | #### Tints and shades of ghostwhite #FEFEFF #FDFDFF #FBFBFF #F9F9FF #F8F8FF #D3D3D9 #A9A9AD #7C7C80 #4F4F52 Built by mixing ghostwhite toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #F0F8FF Alice Blue #F5F5F5 White Smoke #FFFAFA Snow Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for ghostwhite? ghostwhite is #F8F8FF, which is rgb(248, 248, 255) and hsl(240, 100%, 99%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is ghostwhite light or dark? Ghost White has a relative luminance of 0.943 on a 0–1 scale, so it is a light color. Against white it scores 1.06:1; against black, 19.86:1. ##### Can I use ghostwhite for text? ghostwhite reaches 19.86:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFD700 Gold — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/gold ### #FFD700 — Gold Gold is the CSS named color #FFD700 — rgb(255, 215, 0), hsl(51, 100%, 50%). Its relative luminance is 0.699, giving 1.40:1 against white and 14.97:1 against black, so it works as a text color on black. #### Gold in every notation | HEX | #FFD700 | | RGB | rgb(255, 215, 0) | | HSL | hsl(51, 100%, 50%) | | Relative luminance | 0.6986 | | Contrast on white | 1.40:1 AA fail | | Contrast on black | 14.97:1 AA pass | #### Tints and shades of gold #FFF9D9 #FFF1A6 #FFE766 #FFDE2E #FFD700 #D9B700 #AD9200 #806C00 #524500 Built by mixing gold toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFFF00 Yellow #DAA520 Goldenrod #FFA500 Orange Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for gold? gold is #FFD700, which is rgb(255, 215, 0) and hsl(51, 100%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is gold light or dark? Gold has a relative luminance of 0.699 on a 0–1 scale, so it is a light color. Against white it scores 1.40:1; against black, 14.97:1. ##### Can I use gold for text? gold reaches 14.97:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #DAA520 Goldenrod — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/goldenrod ### #DAA520 — Goldenrod Goldenrod is the CSS named color #DAA520 — rgb(218, 165, 32), hsl(43, 74%, 49%). Its relative luminance is 0.419, giving 2.24:1 against white and 9.38:1 against black, so it works as a text color on black. #### Goldenrod in every notation | HEX | #DAA520 | | RGB | rgb(218, 165, 32) | | HSL | hsl(43, 74%, 49%) | | Relative luminance | 0.4192 | | Contrast on white | 2.24:1 AA fail | | Contrast on black | 9.38:1 AA pass | #### Tints and shades of goldenrod #F9F2DE #F2E0B1 #E9C979 #E1B548 #DAA520 #B98C1B #947016 #6D5310 #46350A Built by mixing goldenrod toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #B8860B Dark Goldenrod #FFA500 Orange #CD853F Peru Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for goldenrod? goldenrod is #DAA520, which is rgb(218, 165, 32) and hsl(43, 74%, 49%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is goldenrod light or dark? Goldenrod has a relative luminance of 0.419 on a 0–1 scale, so it is a dark color. Against white it scores 2.24:1; against black, 9.38:1. ##### Can I use goldenrod for text? goldenrod reaches 9.38:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #808080 Gray — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/gray ### #808080 — Gray Gray is the CSS named color #808080 — rgb(128, 128, 128), hsl(0, 0%, 50%). Its relative luminance is 0.216, giving 3.95:1 against white and 5.32:1 against black, so it works as a text color on black. #### Gray in every notation | HEX | #808080 | | RGB | rgb(128, 128, 128) | | HSL | hsl(0, 0%, 50%) | | Relative luminance | 0.2159 | | Contrast on white | 3.95:1 large text only | | Contrast on black | 5.32:1 AA pass | #### Tints and shades of gray #ECECEC #D3D3D3 #B3B3B3 #979797 #808080 #6D6D6D #575757 #404040 #292929 Built by mixing gray toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #808080 Grey #696969 Dim Gray #696969 Dim Grey Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for gray? gray is #808080, which is rgb(128, 128, 128) and hsl(0, 0%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is gray light or dark? Gray has a relative luminance of 0.216 on a 0–1 scale, so it is a dark color. Against white it scores 3.95:1; against black, 5.32:1. ##### Can I use gray for text? gray reaches 5.32:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #008000 Green — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/green ### #008000 — Green Green is the CSS named color #008000 — rgb(0, 128, 0), hsl(120, 100%, 25%). Its relative luminance is 0.154, giving 5.14:1 against white and 4.09:1 against black, so it works as a text color on white. #### Green in every notation | HEX | #008000 | | RGB | rgb(0, 128, 0) | | HSL | hsl(120, 100%, 25%) | | Relative luminance | 0.1544 | | Contrast on white | 5.14:1 AA pass | | Contrast on black | 4.09:1 large text only | #### Tints and shades of green #D9ECD9 #A6D3A6 #66B366 #2E972E #008000 #006D00 #005700 #004000 #002900 Built by mixing green toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #228B22 Forest Green #006400 Dark Green #6B8E23 Olive Drab Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for green? green is #008000, which is rgb(0, 128, 0) and hsl(120, 100%, 25%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is green light or dark? Green has a relative luminance of 0.154 on a 0–1 scale, so it is a dark color. Against white it scores 5.14:1; against black, 4.09:1. ##### Can I use green for text? green reaches 5.14:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #ADFF2F Green Yellow — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/greenyellow ### #ADFF2F — Green Yellow Green Yellow is the CSS named color #ADFF2F — rgb(173, 255, 47), hsl(84, 100%, 59%). Its relative luminance is 0.806, giving 1.23:1 against white and 17.12:1 against black, so it works as a text color on black. #### Green Yellow in every notation | HEX | #ADFF2F | | RGB | rgb(173, 255, 47) | | HSL | hsl(84, 100%, 59%) | | Relative luminance | 0.8061 | | Contrast on white | 1.23:1 AA fail | | Contrast on black | 17.12:1 AA pass | #### Tints and shades of greenyellow #F3FFE0 #E2FFB6 #CEFF82 #BCFF54 #ADFF2F #93D928 #76AD20 #578018 #37520F Built by mixing greenyellow toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #7CFC00 Lawn Green #7FFF00 Chartreuse #9ACD32 Yellow Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for greenyellow? greenyellow is #ADFF2F, which is rgb(173, 255, 47) and hsl(84, 100%, 59%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is greenyellow light or dark? Green Yellow has a relative luminance of 0.806 on a 0–1 scale, so it is a light color. Against white it scores 1.23:1; against black, 17.12:1. ##### Can I use greenyellow for text? greenyellow reaches 17.12:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #808080 Grey — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/grey ### #808080 — Grey Grey is the CSS named color #808080 — rgb(128, 128, 128), hsl(0, 0%, 50%). Its relative luminance is 0.216, giving 3.95:1 against white and 5.32:1 against black, so it works as a text color on black. #### Grey in every notation | HEX | #808080 | | RGB | rgb(128, 128, 128) | | HSL | hsl(0, 0%, 50%) | | Relative luminance | 0.2159 | | Contrast on white | 3.95:1 large text only | | Contrast on black | 5.32:1 AA pass | #### Tints and shades of grey #ECECEC #D3D3D3 #B3B3B3 #979797 #808080 #6D6D6D #575757 #404040 #292929 Built by mixing grey toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #808080 Gray #696969 Dim Gray #696969 Dim Grey Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for grey? grey is #808080, which is rgb(128, 128, 128) and hsl(0, 0%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is grey light or dark? Grey has a relative luminance of 0.216 on a 0–1 scale, so it is a dark color. Against white it scores 3.95:1; against black, 5.32:1. ##### Can I use grey for text? grey reaches 5.32:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #F0FFF0 Honeydew — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/honeydew ### #F0FFF0 — Honeydew Honeydew is the CSS named color #F0FFF0 — rgb(240, 255, 240), hsl(120, 100%, 97%). Its relative luminance is 0.963, giving 1.04:1 against white and 20.27:1 against black, so it works as a text color on black. #### Honeydew in every notation | HEX | #F0FFF0 | | RGB | rgb(240, 255, 240) | | HSL | hsl(120, 100%, 97%) | | Relative luminance | 0.9634 | | Contrast on white | 1.04:1 AA fail | | Contrast on black | 20.27:1 AA pass | #### Tints and shades of honeydew #FDFFFD #FAFFFA #F6FFF6 #F3FFF3 #F0FFF0 #CCD9CC #A3ADA3 #788078 #4D524D Built by mixing honeydew toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFFFF0 Ivory #F5FFFA Mint Cream #FFFAF0 Floral White Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for honeydew? honeydew is #F0FFF0, which is rgb(240, 255, 240) and hsl(120, 100%, 97%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is honeydew light or dark? Honeydew has a relative luminance of 0.963 on a 0–1 scale, so it is a light color. Against white it scores 1.04:1; against black, 20.27:1. ##### Can I use honeydew for text? honeydew reaches 20.27:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FF69B4 Hot Pink — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/hotpink ### #FF69B4 — Hot Pink Hot Pink is the CSS named color #FF69B4 — rgb(255, 105, 180), hsl(330, 100%, 71%). Its relative luminance is 0.347, giving 2.65:1 against white and 7.93:1 against black, so it works as a text color on black. #### Hot Pink in every notation | HEX | #FF69B4 | | RGB | rgb(255, 105, 180) | | HSL | hsl(330, 100%, 71%) | | Relative luminance | 0.3466 | | Contrast on white | 2.65:1 AA fail | | Contrast on black | 7.93:1 AA pass | #### Tints and shades of hotpink #FFE9F4 #FFCBE5 #FFA5D2 #FF84C2 #FF69B4 #D95999 #AD477A #80355A #52223A Built by mixing hotpink toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #C71585 Medium Violet Red #DB7093 Pale Violet Red #FF1493 Deep Pink Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for hotpink? hotpink is #FF69B4, which is rgb(255, 105, 180) and hsl(330, 100%, 71%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is hotpink light or dark? Hot Pink has a relative luminance of 0.347 on a 0–1 scale, so it is a dark color. Against white it scores 2.65:1; against black, 7.93:1. ##### Can I use hotpink for text? hotpink reaches 7.93:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #CD5C5C Indian Red — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/indianred ### #CD5C5C — Indian Red Indian Red is the CSS named color #CD5C5C — rgb(205, 92, 92), hsl(0, 53%, 58%). Its relative luminance is 0.214, giving 3.98:1 against white and 5.28:1 against black, so it works as a text color on black. #### Indian Red in every notation | HEX | #CD5C5C | | RGB | rgb(205, 92, 92) | | HSL | hsl(0, 53%, 58%) | | Relative luminance | 0.2141 | | Contrast on white | 3.98:1 large text only | | Contrast on black | 5.28:1 AA pass | #### Tints and shades of indianred #F8E7E7 #EEC6C6 #E19D9D #D67979 #CD5C5C #AE4E4E #8B3F3F #672E2E #421D1D Built by mixing indianred toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #F08080 Light Coral #FA8072 Salmon #A52A2A Brown Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for indianred? indianred is #CD5C5C, which is rgb(205, 92, 92) and hsl(0, 53%, 58%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is indianred light or dark? Indian Red has a relative luminance of 0.214 on a 0–1 scale, so it is a dark color. Against white it scores 3.98:1; against black, 5.28:1. ##### Can I use indianred for text? indianred reaches 5.28:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #4B0082 Indigo — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/indigo ### #4B0082 — Indigo Indigo is the CSS named color #4B0082 — rgb(75, 0, 130), hsl(275, 100%, 25%). Its relative luminance is 0.031, giving 12.95:1 against white and 1.62:1 against black, so it works as a text color on white. #### Indigo in every notation | HEX | #4B0082 | | RGB | rgb(75, 0, 130) | | HSL | hsl(275, 100%, 25%) | | Relative luminance | 0.0311 | | Contrast on white | 12.95:1 AA pass | | Contrast on black | 1.62:1 AA fail | #### Tints and shades of indigo #E4D9EC #C0A6D3 #9366B4 #6B2E99 #4B0082 #40006F #330058 #260041 #18002A Built by mixing indigo toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #000080 Navy #663399 Rebecca Purple #00008B Dark Blue Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for indigo? indigo is #4B0082, which is rgb(75, 0, 130) and hsl(275, 100%, 25%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is indigo light or dark? Indigo has a relative luminance of 0.031 on a 0–1 scale, so it is a dark color. Against white it scores 12.95:1; against black, 1.62:1. ##### Can I use indigo for text? indigo reaches 12.95:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFFFF0 Ivory — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/ivory ### #FFFFF0 — Ivory Ivory is the CSS named color #FFFFF0 — rgb(255, 255, 240), hsl(60, 100%, 97%). Its relative luminance is 0.991, giving 1.01:1 against white and 20.81:1 against black, so it works as a text color on black. #### Ivory in every notation | HEX | #FFFFF0 | | RGB | rgb(255, 255, 240) | | HSL | hsl(60, 100%, 97%) | | Relative luminance | 0.9907 | | Contrast on white | 1.01:1 AA fail | | Contrast on black | 20.81:1 AA pass | #### Tints and shades of ivory #FFFFFD #FFFFFA #FFFFF6 #FFFFF3 #FFFFF0 #D9D9CC #ADADA3 #808078 #52524D Built by mixing ivory toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFFAF0 Floral White #FDF5E6 Old Lace #F0FFF0 Honeydew Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for ivory? ivory is #FFFFF0, which is rgb(255, 255, 240) and hsl(60, 100%, 97%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is ivory light or dark? Ivory has a relative luminance of 0.991 on a 0–1 scale, so it is a light color. Against white it scores 1.01:1; against black, 20.81:1. ##### Can I use ivory for text? ivory reaches 20.81:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #F0E68C Khaki — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/khaki ### #F0E68C — Khaki Khaki is the CSS named color #F0E68C — rgb(240, 230, 140), hsl(54, 77%, 75%). Its relative luminance is 0.770, giving 1.28:1 against white and 16.40:1 against black, so it works as a text color on black. #### Khaki in every notation | HEX | #F0E68C | | RGB | rgb(240, 230, 140) | | HSL | hsl(54, 77%, 75%) | | Relative luminance | 0.7701 | | Contrast on white | 1.28:1 AA fail | | Contrast on black | 16.40:1 AA pass | #### Tints and shades of khaki #FDFBEE #FAF6D7 #F6F0BA #F3EBA1 #F0E68C #CCC477 #A39C5F #787346 #4D4A2D Built by mixing khaki toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #EEE8AA Pale Goldenrod #BDB76B Dark Khaki #FFDEAD Navajo White Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for khaki? khaki is #F0E68C, which is rgb(240, 230, 140) and hsl(54, 77%, 75%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is khaki light or dark? Khaki has a relative luminance of 0.770 on a 0–1 scale, so it is a light color. Against white it scores 1.28:1; against black, 16.40:1. ##### Can I use khaki for text? khaki reaches 16.40:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #E6E6FA Lavender — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lavender ### #E6E6FA — Lavender Lavender is the CSS named color #E6E6FA — rgb(230, 230, 250), hsl(240, 67%, 94%). Its relative luminance is 0.803, giving 1.23:1 against white and 17.06:1 against black, so it works as a text color on black. #### Lavender in every notation | HEX | #E6E6FA | | RGB | rgb(230, 230, 250) | | HSL | hsl(240, 67%, 94%) | | Relative luminance | 0.8032 | | Contrast on white | 1.23:1 AA fail | | Contrast on black | 17.06:1 AA pass | #### Tints and shades of lavender #FBFBFE #F6F6FD #F0F0FC #EBEBFB #E6E6FA #C4C4D5 #9C9CAA #73737D #4A4A50 Built by mixing lavender toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #F8F8FF Ghost White #F0F8FF Alice Blue #FFF0F5 Lavender Blush Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lavender? lavender is #E6E6FA, which is rgb(230, 230, 250) and hsl(240, 67%, 94%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lavender light or dark? Lavender has a relative luminance of 0.803 on a 0–1 scale, so it is a light color. Against white it scores 1.23:1; against black, 17.06:1. ##### Can I use lavender for text? lavender reaches 17.06:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFF0F5 Lavender Blush — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lavenderblush ### #FFF0F5 — Lavender Blush Lavender Blush is the CSS named color #FFF0F5 — rgb(255, 240, 245), hsl(340, 100%, 97%). Its relative luminance is 0.902, giving 1.10:1 against white and 19.03:1 against black, so it works as a text color on black. #### Lavender Blush in every notation | HEX | #FFF0F5 | | RGB | rgb(255, 240, 245) | | HSL | hsl(340, 100%, 97%) | | Relative luminance | 0.9017 | | Contrast on white | 1.10:1 AA fail | | Contrast on black | 19.03:1 AA pass | #### Tints and shades of lavenderblush #FFFDFE #FFFAFC #FFF6F9 #FFF3F7 #FFF0F5 #D9CCD0 #ADA3A7 #80787B #524D4E Built by mixing lavenderblush toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFFAFA Snow #F8F8FF Ghost White #F5F5F5 White Smoke Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lavenderblush? lavenderblush is #FFF0F5, which is rgb(255, 240, 245) and hsl(340, 100%, 97%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lavenderblush light or dark? Lavender Blush has a relative luminance of 0.902 on a 0–1 scale, so it is a light color. Against white it scores 1.10:1; against black, 19.03:1. ##### Can I use lavenderblush for text? lavenderblush reaches 19.03:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #7CFC00 Lawn Green — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lawngreen ### #7CFC00 — Lawn Green Lawn Green is the CSS named color #7CFC00 — rgb(124, 252, 0), hsl(90, 100%, 49%). Its relative luminance is 0.739, giving 1.33:1 against white and 15.78:1 against black, so it works as a text color on black. #### Lawn Green in every notation | HEX | #7CFC00 | | RGB | rgb(124, 252, 0) | | HSL | hsl(90, 100%, 49%) | | Relative luminance | 0.7391 | | Contrast on white | 1.33:1 AA fail | | Contrast on black | 15.78:1 AA pass | #### Tints and shades of lawngreen #EBFFD9 #D1FEA6 #B0FD66 #94FD2E #7CFC00 #69D600 #54AB00 #3E7E00 #285100 Built by mixing lawngreen toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #7FFF00 Chartreuse #ADFF2F Green Yellow #00FF00 Lime Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lawngreen? lawngreen is #7CFC00, which is rgb(124, 252, 0) and hsl(90, 100%, 49%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lawngreen light or dark? Lawn Green has a relative luminance of 0.739 on a 0–1 scale, so it is a light color. Against white it scores 1.33:1; against black, 15.78:1. ##### Can I use lawngreen for text? lawngreen reaches 15.78:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFFACD Lemon Chiffon — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lemonchiffon ### #FFFACD — Lemon Chiffon Lemon Chiffon is the CSS named color #FFFACD — rgb(255, 250, 205), hsl(54, 100%, 90%). Its relative luminance is 0.940, giving 1.06:1 against white and 19.81:1 against black, so it works as a text color on black. #### Lemon Chiffon in every notation | HEX | #FFFACD | | RGB | rgb(255, 250, 205) | | HSL | hsl(54, 100%, 90%) | | Relative luminance | 0.9404 | | Contrast on white | 1.06:1 AA fail | | Contrast on black | 19.81:1 AA pass | #### Tints and shades of lemonchiffon #FFFEF8 #FFFDEE #FFFCE1 #FFFBD6 #FFFACD #D9D5AE #ADAA8B #807D67 #525042 Built by mixing lemonchiffon toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FAFAD2 Light Goldenrod Yellow #FFFFE0 Light Yellow #FFF8DC Cornsilk Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lemonchiffon? lemonchiffon is #FFFACD, which is rgb(255, 250, 205) and hsl(54, 100%, 90%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lemonchiffon light or dark? Lemon Chiffon has a relative luminance of 0.940 on a 0–1 scale, so it is a light color. Against white it scores 1.06:1; against black, 19.81:1. ##### Can I use lemonchiffon for text? lemonchiffon reaches 19.81:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #ADD8E6 Light Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lightblue ### #ADD8E6 — Light Blue Light Blue is the CSS named color #ADD8E6 — rgb(173, 216, 230), hsl(195, 53%, 79%). Its relative luminance is 0.637, giving 1.53:1 against white and 13.74:1 against black, so it works as a text color on black. #### Light Blue in every notation | HEX | #ADD8E6 | | RGB | rgb(173, 216, 230) | | HSL | hsl(195, 53%, 79%) | | Relative luminance | 0.6371 | | Contrast on white | 1.53:1 AA fail | | Contrast on black | 13.74:1 AA pass | #### Tints and shades of lightblue #F3F9FB #E2F1F6 #CEE8F0 #BCDFEB #ADD8E6 #93B8C4 #76939C #576C73 #37454A Built by mixing lightblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #B0E0E6 Powder Blue #87CEEB Sky Blue #B0C4DE Light Steel Blue Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lightblue? lightblue is #ADD8E6, which is rgb(173, 216, 230) and hsl(195, 53%, 79%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lightblue light or dark? Light Blue has a relative luminance of 0.637 on a 0–1 scale, so it is a light color. Against white it scores 1.53:1; against black, 13.74:1. ##### Can I use lightblue for text? lightblue reaches 13.74:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #F08080 Light Coral — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lightcoral ### #F08080 — Light Coral Light Coral is the CSS named color #F08080 — rgb(240, 128, 128), hsl(0, 79%, 72%). Its relative luminance is 0.355, giving 2.59:1 against white and 8.10:1 against black, so it works as a text color on black. #### Light Coral in every notation | HEX | #F08080 | | RGB | rgb(240, 128, 128) | | HSL | hsl(0, 79%, 72%) | | Relative luminance | 0.3552 | | Contrast on white | 2.59:1 AA fail | | Contrast on black | 8.10:1 AA pass | #### Tints and shades of lightcoral #FDECEC #FAD3D3 #F6B3B3 #F39797 #F08080 #CC6D6D #A35757 #784040 #4D2929 Built by mixing lightcoral toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FA8072 Salmon #CD5C5C Indian Red #E9967A Dark Salmon Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lightcoral? lightcoral is #F08080, which is rgb(240, 128, 128) and hsl(0, 79%, 72%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lightcoral light or dark? Light Coral has a relative luminance of 0.355 on a 0–1 scale, so it is a dark color. Against white it scores 2.59:1; against black, 8.10:1. ##### Can I use lightcoral for text? lightcoral reaches 8.10:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #E0FFFF Light Cyan — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lightcyan ### #E0FFFF — Light Cyan Light Cyan is the CSS named color #E0FFFF — rgb(224, 255, 255), hsl(180, 100%, 94%). Its relative luminance is 0.946, giving 1.05:1 against white and 19.92:1 against black, so it works as a text color on black. #### Light Cyan in every notation | HEX | #E0FFFF | | RGB | rgb(224, 255, 255) | | HSL | hsl(180, 100%, 94%) | | Relative luminance | 0.9459 | | Contrast on white | 1.05:1 AA fail | | Contrast on black | 19.92:1 AA pass | #### Tints and shades of lightcyan #FAFFFF #F4FFFF #ECFFFF #E6FFFF #E0FFFF #BED9D9 #98ADAD #708080 #485252 Built by mixing lightcyan toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #F0FFFF Azure #F5FFFA Mint Cream #F0F8FF Alice Blue Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lightcyan? lightcyan is #E0FFFF, which is rgb(224, 255, 255) and hsl(180, 100%, 94%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lightcyan light or dark? Light Cyan has a relative luminance of 0.946 on a 0–1 scale, so it is a light color. Against white it scores 1.05:1; against black, 19.92:1. ##### Can I use lightcyan for text? lightcyan reaches 19.92:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FAFAD2 Light Goldenrod Yellow — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lightgoldenrodyellow ### #FAFAD2 — Light Goldenrod Yellow Light Goldenrod Yellow is the CSS named color #FAFAD2 — rgb(250, 250, 210), hsl(60, 80%, 90%). Its relative luminance is 0.933, giving 1.07:1 against white and 19.67:1 against black, so it works as a text color on black. #### Light Goldenrod Yellow in every notation | HEX | #FAFAD2 | | RGB | rgb(250, 250, 210) | | HSL | hsl(60, 80%, 90%) | | Relative luminance | 0.9335 | | Contrast on white | 1.07:1 AA fail | | Contrast on black | 19.67:1 AA pass | #### Tints and shades of lightgoldenrodyellow #FEFEF8 #FDFDEF #FCFCE4 #FBFBDA #FAFAD2 #D5D5B3 #AAAA8F #7D7D69 #505043 Built by mixing lightgoldenrodyellow toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFFACD Lemon Chiffon #FFFFE0 Light Yellow #FFF8DC Cornsilk Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lightgoldenrodyellow? lightgoldenrodyellow is #FAFAD2, which is rgb(250, 250, 210) and hsl(60, 80%, 90%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lightgoldenrodyellow light or dark? Light Goldenrod Yellow has a relative luminance of 0.933 on a 0–1 scale, so it is a light color. Against white it scores 1.07:1; against black, 19.67:1. ##### Can I use lightgoldenrodyellow for text? lightgoldenrodyellow reaches 19.67:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #D3D3D3 Light Gray — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lightgray ### #D3D3D3 — Light Gray Light Gray is the CSS named color #D3D3D3 — rgb(211, 211, 211), hsl(0, 0%, 83%). Its relative luminance is 0.651, giving 1.50:1 against white and 14.03:1 against black, so it works as a text color on black. #### Light Gray in every notation | HEX | #D3D3D3 | | RGB | rgb(211, 211, 211) | | HSL | hsl(0, 0%, 83%) | | Relative luminance | 0.6514 | | Contrast on white | 1.50:1 AA fail | | Contrast on black | 14.03:1 AA pass | #### Tints and shades of lightgray #F8F8F8 #F0F0F0 #E5E5E5 #DBDBDB #D3D3D3 #B3B3B3 #8F8F8F #6A6A6A #444444 Built by mixing lightgray toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #D3D3D3 Light Grey #DCDCDC Gainsboro #C0C0C0 Silver Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lightgray? lightgray is #D3D3D3, which is rgb(211, 211, 211) and hsl(0, 0%, 83%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lightgray light or dark? Light Gray has a relative luminance of 0.651 on a 0–1 scale, so it is a light color. Against white it scores 1.50:1; against black, 14.03:1. ##### Can I use lightgray for text? lightgray reaches 14.03:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #90EE90 Light Green — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lightgreen ### #90EE90 — Light Green Light Green is the CSS named color #90EE90 — rgb(144, 238, 144), hsl(120, 73%, 75%). Its relative luminance is 0.691, giving 1.42:1 against white and 14.82:1 against black, so it works as a text color on black. #### Light Green in every notation | HEX | #90EE90 | | RGB | rgb(144, 238, 144) | | HSL | hsl(120, 73%, 75%) | | Relative luminance | 0.6909 | | Contrast on white | 1.42:1 AA fail | | Contrast on black | 14.82:1 AA pass | #### Tints and shades of lightgreen #EEFCEE #D8F9D8 #BCF5BC #A4F1A4 #90EE90 #7ACA7A #62A262 #487748 #2E4C2E Built by mixing lightgreen toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #98FB98 Pale Green #00FA9A Medium Spring Green #3CB371 Medium Sea Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lightgreen? lightgreen is #90EE90, which is rgb(144, 238, 144) and hsl(120, 73%, 75%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lightgreen light or dark? Light Green has a relative luminance of 0.691 on a 0–1 scale, so it is a light color. Against white it scores 1.42:1; against black, 14.82:1. ##### Can I use lightgreen for text? lightgreen reaches 14.82:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #D3D3D3 Light Grey — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lightgrey ### #D3D3D3 — Light Grey Light Grey is the CSS named color #D3D3D3 — rgb(211, 211, 211), hsl(0, 0%, 83%). Its relative luminance is 0.651, giving 1.50:1 against white and 14.03:1 against black, so it works as a text color on black. #### Light Grey in every notation | HEX | #D3D3D3 | | RGB | rgb(211, 211, 211) | | HSL | hsl(0, 0%, 83%) | | Relative luminance | 0.6514 | | Contrast on white | 1.50:1 AA fail | | Contrast on black | 14.03:1 AA pass | #### Tints and shades of lightgrey #F8F8F8 #F0F0F0 #E5E5E5 #DBDBDB #D3D3D3 #B3B3B3 #8F8F8F #6A6A6A #444444 Built by mixing lightgrey toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #D3D3D3 Light Gray #DCDCDC Gainsboro #C0C0C0 Silver Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lightgrey? lightgrey is #D3D3D3, which is rgb(211, 211, 211) and hsl(0, 0%, 83%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lightgrey light or dark? Light Grey has a relative luminance of 0.651 on a 0–1 scale, so it is a light color. Against white it scores 1.50:1; against black, 14.03:1. ##### Can I use lightgrey for text? lightgrey reaches 14.03:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFB6C1 Light Pink — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lightpink ### #FFB6C1 — Light Pink Light Pink is the CSS named color #FFB6C1 — rgb(255, 182, 193), hsl(351, 100%, 86%). Its relative luminance is 0.586, giving 1.65:1 against white and 12.71:1 against black, so it works as a text color on black. #### Light Pink in every notation | HEX | #FFB6C1 | | RGB | rgb(255, 182, 193) | | HSL | hsl(351, 100%, 86%) | | Relative luminance | 0.5857 | | Contrast on white | 1.65:1 AA fail | | Contrast on black | 12.71:1 AA pass | #### Tints and shades of lightpink #FFF4F6 #FFE5E9 #FFD3DA #FFC3CC #FFB6C1 #D99BA4 #AD7C83 #805B61 #523A3E Built by mixing lightpink toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFC0CB Pink #D8BFD8 Thistle #BC8F8F Rosy Brown Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lightpink? lightpink is #FFB6C1, which is rgb(255, 182, 193) and hsl(351, 100%, 86%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lightpink light or dark? Light Pink has a relative luminance of 0.586 on a 0–1 scale, so it is a light color. Against white it scores 1.65:1; against black, 12.71:1. ##### Can I use lightpink for text? lightpink reaches 12.71:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFA07A Light Salmon — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lightsalmon ### #FFA07A — Light Salmon Light Salmon is the CSS named color #FFA07A — rgb(255, 160, 122), hsl(17, 100%, 74%). Its relative luminance is 0.478, giving 1.99:1 against white and 10.56:1 against black, so it works as a text color on black. #### Light Salmon in every notation | HEX | #FFA07A | | RGB | rgb(255, 160, 122) | | HSL | hsl(17, 100%, 74%) | | Relative luminance | 0.4781 | | Contrast on white | 1.99:1 AA fail | | Contrast on black | 10.56:1 AA pass | #### Tints and shades of lightsalmon #FFF1EB #FFDED0 #FFC6AF #FFB192 #FFA07A #D98868 #AD6D53 #80503D #523327 Built by mixing lightsalmon toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #E9967A Dark Salmon #F4A460 Sandy Brown #FA8072 Salmon Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lightsalmon? lightsalmon is #FFA07A, which is rgb(255, 160, 122) and hsl(17, 100%, 74%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lightsalmon light or dark? Light Salmon has a relative luminance of 0.478 on a 0–1 scale, so it is a dark color. Against white it scores 1.99:1; against black, 10.56:1. ##### Can I use lightsalmon for text? lightsalmon reaches 10.56:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #20B2AA Light Sea Green — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lightseagreen ### #20B2AA — Light Sea Green Light Sea Green is the CSS named color #20B2AA — rgb(32, 178, 170), hsl(177, 70%, 41%). Its relative luminance is 0.351, giving 2.62:1 against white and 8.01:1 against black, so it works as a text color on black. #### Light Sea Green in every notation | HEX | #20B2AA | | RGB | rgb(32, 178, 170) | | HSL | hsl(177, 70%, 41%) | | Relative luminance | 0.3505 | | Contrast on white | 2.62:1 AA fail | | Contrast on black | 8.01:1 AA pass | #### Tints and shades of lightseagreen #DEF3F2 #B1E4E1 #79D1CC #48C0B9 #20B2AA #1B9791 #167974 #105955 #0A3936 Built by mixing lightseagreen toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #48D1CC Medium Turquoise #00CED1 Dark Turquoise #008B8B Dark Cyan Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lightseagreen? lightseagreen is #20B2AA, which is rgb(32, 178, 170) and hsl(177, 70%, 41%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lightseagreen light or dark? Light Sea Green has a relative luminance of 0.351 on a 0–1 scale, so it is a dark color. Against white it scores 2.62:1; against black, 8.01:1. ##### Can I use lightseagreen for text? lightseagreen reaches 8.01:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #87CEFA Light Sky Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lightskyblue ### #87CEFA — Light Sky Blue Light Sky Blue is the CSS named color #87CEFA — rgb(135, 206, 250), hsl(203, 92%, 75%). Its relative luminance is 0.562, giving 1.72:1 against white and 12.24:1 against black, so it works as a text color on black. #### Light Sky Blue in every notation | HEX | #87CEFA | | RGB | rgb(135, 206, 250) | | HSL | hsl(203, 92%, 75%) | | Relative luminance | 0.5620 | | Contrast on white | 1.72:1 AA fail | | Contrast on black | 12.24:1 AA pass | #### Tints and shades of lightskyblue #EDF8FE #D5EEFD #B7E2FC #9DD7FB #87CEFA #73AFD5 #5C8CAA #44677D #2B4250 Built by mixing lightskyblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #87CEEB Sky Blue #B0C4DE Light Steel Blue #00BFFF Deep Sky Blue Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lightskyblue? lightskyblue is #87CEFA, which is rgb(135, 206, 250) and hsl(203, 92%, 75%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lightskyblue light or dark? Light Sky Blue has a relative luminance of 0.562 on a 0–1 scale, so it is a light color. Against white it scores 1.72:1; against black, 12.24:1. ##### Can I use lightskyblue for text? lightskyblue reaches 12.24:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #778899 Light Slate Gray — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lightslategray ### #778899 — Light Slate Gray Light Slate Gray is the CSS named color #778899 — rgb(119, 136, 153), hsl(210, 14%, 53%). Its relative luminance is 0.238, giving 3.64:1 against white and 5.77:1 against black, so it works as a text color on black. #### Light Slate Gray in every notation | HEX | #778899 | | RGB | rgb(119, 136, 153) | | HSL | hsl(210, 14%, 53%) | | Relative luminance | 0.2383 | | Contrast on white | 3.64:1 large text only | | Contrast on black | 5.77:1 AA pass | #### Tints and shades of lightslategray #EBEDF0 #CFD5DB #ADB8C2 #8F9DAB #778899 #657482 #515C68 #3C444D #262C31 Built by mixing lightslategray toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #778899 Light Slate Grey #708090 Slate Gray #708090 Slate Grey Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lightslategray? lightslategray is #778899, which is rgb(119, 136, 153) and hsl(210, 14%, 53%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lightslategray light or dark? Light Slate Gray has a relative luminance of 0.238 on a 0–1 scale, so it is a dark color. Against white it scores 3.64:1; against black, 5.77:1. ##### Can I use lightslategray for text? lightslategray reaches 5.77:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #778899 Light Slate Grey — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lightslategrey ### #778899 — Light Slate Grey Light Slate Grey is the CSS named color #778899 — rgb(119, 136, 153), hsl(210, 14%, 53%). Its relative luminance is 0.238, giving 3.64:1 against white and 5.77:1 against black, so it works as a text color on black. #### Light Slate Grey in every notation | HEX | #778899 | | RGB | rgb(119, 136, 153) | | HSL | hsl(210, 14%, 53%) | | Relative luminance | 0.2383 | | Contrast on white | 3.64:1 large text only | | Contrast on black | 5.77:1 AA pass | #### Tints and shades of lightslategrey #EBEDF0 #CFD5DB #ADB8C2 #8F9DAB #778899 #657482 #515C68 #3C444D #262C31 Built by mixing lightslategrey toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #778899 Light Slate Gray #708090 Slate Gray #708090 Slate Grey Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lightslategrey? lightslategrey is #778899, which is rgb(119, 136, 153) and hsl(210, 14%, 53%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lightslategrey light or dark? Light Slate Grey has a relative luminance of 0.238 on a 0–1 scale, so it is a dark color. Against white it scores 3.64:1; against black, 5.77:1. ##### Can I use lightslategrey for text? lightslategrey reaches 5.77:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #B0C4DE Light Steel Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lightsteelblue ### #B0C4DE — Light Steel Blue Light Steel Blue is the CSS named color #B0C4DE — rgb(176, 196, 222), hsl(214, 41%, 78%). Its relative luminance is 0.540, giving 1.78:1 against white and 11.80:1 against black, so it works as a text color on black. #### Light Steel Blue in every notation | HEX | #B0C4DE | | RGB | rgb(176, 196, 222) | | HSL | hsl(214, 41%, 78%) | | Relative luminance | 0.5398 | | Contrast on white | 1.78:1 AA fail | | Contrast on black | 11.80:1 AA pass | #### Tints and shades of lightsteelblue #F3F6FA #E3EAF3 #D0DCEB #BECFE4 #B0C4DE #96A7BD #788597 #58626F #383F47 Built by mixing lightsteelblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #ADD8E6 Light Blue #87CEEB Sky Blue #C0C0C0 Silver Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lightsteelblue? lightsteelblue is #B0C4DE, which is rgb(176, 196, 222) and hsl(214, 41%, 78%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lightsteelblue light or dark? Light Steel Blue has a relative luminance of 0.540 on a 0–1 scale, so it is a light color. Against white it scores 1.78:1; against black, 11.80:1. ##### Can I use lightsteelblue for text? lightsteelblue reaches 11.80:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFFFE0 Light Yellow — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lightyellow ### #FFFFE0 — Light Yellow Light Yellow is the CSS named color #FFFFE0 — rgb(255, 255, 224), hsl(60, 100%, 94%). Its relative luminance is 0.982, giving 1.02:1 against white and 20.63:1 against black, so it works as a text color on black. #### Light Yellow in every notation | HEX | #FFFFE0 | | RGB | rgb(255, 255, 224) | | HSL | hsl(60, 100%, 94%) | | Relative luminance | 0.9816 | | Contrast on white | 1.02:1 AA fail | | Contrast on black | 20.63:1 AA pass | #### Tints and shades of lightyellow #FFFFFA #FFFFF4 #FFFFEC #FFFFE6 #FFFFE0 #D9D9BE #ADAD98 #808070 #525248 Built by mixing lightyellow toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFF8DC Cornsilk #F5F5DC Beige #FAFAD2 Light Goldenrod Yellow Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lightyellow? lightyellow is #FFFFE0, which is rgb(255, 255, 224) and hsl(60, 100%, 94%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lightyellow light or dark? Light Yellow has a relative luminance of 0.982 on a 0–1 scale, so it is a light color. Against white it scores 1.02:1; against black, 20.63:1. ##### Can I use lightyellow for text? lightyellow reaches 20.63:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #00FF00 Lime — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/lime ### #00FF00 — Lime Lime is the CSS named color #00FF00 — rgb(0, 255, 0), hsl(120, 100%, 50%). Its relative luminance is 0.715, giving 1.37:1 against white and 15.30:1 against black, so it works as a text color on black. #### Lime in every notation | HEX | #00FF00 | | RGB | rgb(0, 255, 0) | | HSL | hsl(120, 100%, 50%) | | Relative luminance | 0.7152 | | Contrast on white | 1.37:1 AA fail | | Contrast on black | 15.30:1 AA pass | #### Tints and shades of lime #D9FFD9 #A6FFA6 #66FF66 #2EFF2E #00FF00 #00D900 #00AD00 #008000 #005200 Built by mixing lime toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #7FFF00 Chartreuse #7CFC00 Lawn Green #32CD32 Lime Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for lime? lime is #00FF00, which is rgb(0, 255, 0) and hsl(120, 100%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is lime light or dark? Lime has a relative luminance of 0.715 on a 0–1 scale, so it is a light color. Against white it scores 1.37:1; against black, 15.30:1. ##### Can I use lime for text? lime reaches 15.30:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #32CD32 Lime Green — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/limegreen ### #32CD32 — Lime Green Lime Green is the CSS named color #32CD32 — rgb(50, 205, 50), hsl(120, 61%, 50%). Its relative luminance is 0.446, giving 2.12:1 against white and 9.91:1 against black, so it works as a text color on black. #### Lime Green in every notation | HEX | #32CD32 | | RGB | rgb(50, 205, 50) | | HSL | hsl(120, 61%, 50%) | | Relative luminance | 0.4457 | | Contrast on white | 2.12:1 AA fail | | Contrast on black | 9.91:1 AA pass | #### Tints and shades of limegreen #E0F8E0 #B7EEB7 #84E184 #57D657 #32CD32 #2BAE2B #228B22 #196719 #104210 Built by mixing limegreen toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #00FF7F Spring Green #7CFC00 Lawn Green #9ACD32 Yellow Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for limegreen? limegreen is #32CD32, which is rgb(50, 205, 50) and hsl(120, 61%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is limegreen light or dark? Lime Green has a relative luminance of 0.446 on a 0–1 scale, so it is a dark color. Against white it scores 2.12:1; against black, 9.91:1. ##### Can I use limegreen for text? limegreen reaches 9.91:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FAF0E6 Linen — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/linen ### #FAF0E6 — Linen Linen is the CSS named color #FAF0E6 — rgb(250, 240, 230), hsl(30, 67%, 94%). Its relative luminance is 0.884, giving 1.12:1 against white and 18.67:1 against black, so it works as a text color on black. #### Linen in every notation | HEX | #FAF0E6 | | RGB | rgb(250, 240, 230) | | HSL | hsl(30, 67%, 94%) | | Relative luminance | 0.8836 | | Contrast on white | 1.12:1 AA fail | | Contrast on black | 18.67:1 AA pass | #### Tints and shades of linen #FEFDFB #FDFAF6 #FCF6F0 #FBF3EB #FAF0E6 #D5CCC4 #AAA39C #7D7873 #504D4A Built by mixing linen toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFF5EE Seashell #FDF5E6 Old Lace #FFFAF0 Floral White Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for linen? linen is #FAF0E6, which is rgb(250, 240, 230) and hsl(30, 67%, 94%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is linen light or dark? Linen has a relative luminance of 0.884 on a 0–1 scale, so it is a light color. Against white it scores 1.12:1; against black, 18.67:1. ##### Can I use linen for text? linen reaches 18.67:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FF00FF Magenta — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/magenta ### #FF00FF — Magenta Magenta is the CSS named color #FF00FF — rgb(255, 0, 255), hsl(300, 100%, 50%). Its relative luminance is 0.285, giving 3.14:1 against white and 6.70:1 against black, so it works as a text color on black. #### Magenta in every notation | HEX | #FF00FF | | RGB | rgb(255, 0, 255) | | HSL | hsl(300, 100%, 50%) | | Relative luminance | 0.2848 | | Contrast on white | 3.14:1 large text only | | Contrast on black | 6.70:1 AA pass | #### Tints and shades of magenta #FFD9FF #FFA6FF #FF66FF #FF2EFF #FF00FF #D900D9 #AD00AD #800080 #520052 Built by mixing magenta toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FF00FF Fuchsia #9400D3 Dark Violet #8A2BE2 Blue Violet Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for magenta? magenta is #FF00FF, which is rgb(255, 0, 255) and hsl(300, 100%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is magenta light or dark? Magenta has a relative luminance of 0.285 on a 0–1 scale, so it is a dark color. Against white it scores 3.14:1; against black, 6.70:1. ##### Can I use magenta for text? magenta reaches 6.70:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #800000 Maroon — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/maroon ### #800000 — Maroon Maroon is the CSS named color #800000 — rgb(128, 0, 0), hsl(0, 100%, 25%). Its relative luminance is 0.046, giving 10.95:1 against white and 1.92:1 against black, so it works as a text color on white. #### Maroon in every notation | HEX | #800000 | | RGB | rgb(128, 0, 0) | | HSL | hsl(0, 100%, 25%) | | Relative luminance | 0.0459 | | Contrast on white | 10.95:1 AA pass | | Contrast on black | 1.92:1 AA fail | #### Tints and shades of maroon #ECD9D9 #D3A6A6 #B36666 #972E2E #800000 #6D0000 #570000 #400000 #290000 Built by mixing maroon toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #8B0000 Dark Red #A52A2A Brown #B22222 Firebrick Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for maroon? maroon is #800000, which is rgb(128, 0, 0) and hsl(0, 100%, 25%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is maroon light or dark? Maroon has a relative luminance of 0.046 on a 0–1 scale, so it is a dark color. Against white it scores 10.95:1; against black, 1.92:1. ##### Can I use maroon for text? maroon reaches 10.95:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #66CDAA Medium Aquamarine — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/mediumaquamarine ### #66CDAA — Medium Aquamarine Medium Aquamarine is the CSS named color #66CDAA — rgb(102, 205, 170), hsl(160, 51%, 60%). Its relative luminance is 0.494, giving 1.93:1 against white and 10.88:1 against black, so it works as a text color on black. #### Medium Aquamarine in every notation | HEX | #66CDAA | | RGB | rgb(102, 205, 170) | | HSL | hsl(160, 51%, 60%) | | Relative luminance | 0.4939 | | Contrast on white | 1.93:1 AA fail | | Contrast on black | 10.88:1 AA pass | #### Tints and shades of mediumaquamarine #E8F8F2 #C9EEE1 #A3E1CC #82D6B9 #66CDAA #57AE91 #458B74 #336755 #214236 Built by mixing mediumaquamarine toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #40E0D0 Turquoise #48D1CC Medium Turquoise #20B2AA Light Sea Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for mediumaquamarine? mediumaquamarine is #66CDAA, which is rgb(102, 205, 170) and hsl(160, 51%, 60%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is mediumaquamarine light or dark? Medium Aquamarine has a relative luminance of 0.494 on a 0–1 scale, so it is a dark color. Against white it scores 1.93:1; against black, 10.88:1. ##### Can I use mediumaquamarine for text? mediumaquamarine reaches 10.88:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #0000CD Medium Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/mediumblue ### #0000CD — Medium Blue Medium Blue is the CSS named color #0000CD — rgb(0, 0, 205), hsl(240, 100%, 40%). Its relative luminance is 0.044, giving 11.16:1 against white and 1.88:1 against black, so it works as a text color on white. #### Medium Blue in every notation | HEX | #0000CD | | RGB | rgb(0, 0, 205) | | HSL | hsl(240, 100%, 40%) | | Relative luminance | 0.0441 | | Contrast on white | 11.16:1 AA pass | | Contrast on black | 1.88:1 AA fail | #### Tints and shades of mediumblue #D9D9F8 #A6A6EE #6666E1 #2E2ED6 #0000CD #0000AE #00008B #000067 #000042 Built by mixing mediumblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #0000FF Blue #8A2BE2 Blue Violet #9400D3 Dark Violet Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for mediumblue? mediumblue is #0000CD, which is rgb(0, 0, 205) and hsl(240, 100%, 40%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is mediumblue light or dark? Medium Blue has a relative luminance of 0.044 on a 0–1 scale, so it is a dark color. Against white it scores 11.16:1; against black, 1.88:1. ##### Can I use mediumblue for text? mediumblue reaches 11.16:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #BA55D3 Medium Orchid — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/mediumorchid ### #BA55D3 — Medium Orchid Medium Orchid is the CSS named color #BA55D3 — rgb(186, 85, 211), hsl(288, 59%, 58%). Its relative luminance is 0.216, giving 3.94:1 against white and 5.33:1 against black, so it works as a text color on black. #### Medium Orchid in every notation | HEX | #BA55D3 | | RGB | rgb(186, 85, 211) | | HSL | hsl(288, 59%, 58%) | | Relative luminance | 0.2164 | | Contrast on white | 3.94:1 large text only | | Contrast on black | 5.33:1 AA pass | #### Tints and shades of mediumorchid #F5E6F8 #E7C4F0 #D699E5 #C674DB #BA55D3 #9E48B3 #7E3A8F #5D2B6A #3C1B44 Built by mixing mediumorchid toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #DA70D6 Orchid #9932CC Dark Orchid #EE82EE Violet Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for mediumorchid? mediumorchid is #BA55D3, which is rgb(186, 85, 211) and hsl(288, 59%, 58%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is mediumorchid light or dark? Medium Orchid has a relative luminance of 0.216 on a 0–1 scale, so it is a dark color. Against white it scores 3.94:1; against black, 5.33:1. ##### Can I use mediumorchid for text? mediumorchid reaches 5.33:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #9370DB Medium Purple — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/mediumpurple ### #9370DB — Medium Purple Medium Purple is the CSS named color #9370DB — rgb(147, 112, 219), hsl(260, 60%, 65%). Its relative luminance is 0.229, giving 3.76:1 against white and 5.58:1 against black, so it works as a text color on black. #### Medium Purple in every notation | HEX | #9370DB | | RGB | rgb(147, 112, 219) | | HSL | hsl(260, 60%, 65%) | | Relative luminance | 0.2291 | | Contrast on white | 3.76:1 large text only | | Contrast on black | 5.58:1 AA pass | #### Tints and shades of mediumpurple #EFEAFA #D9CDF2 #BEA9E9 #A68AE1 #9370DB #7D5FBA #644C95 #4A386E #2F2446 Built by mixing mediumpurple toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #6A5ACD Slate Blue #7B68EE Medium Slate Blue #4169E1 Royal Blue Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for mediumpurple? mediumpurple is #9370DB, which is rgb(147, 112, 219) and hsl(260, 60%, 65%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is mediumpurple light or dark? Medium Purple has a relative luminance of 0.229 on a 0–1 scale, so it is a dark color. Against white it scores 3.76:1; against black, 5.58:1. ##### Can I use mediumpurple for text? mediumpurple reaches 5.58:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #3CB371 Medium Sea Green — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/mediumseagreen ### #3CB371 — Medium Sea Green Medium Sea Green is the CSS named color #3CB371 — rgb(60, 179, 113), hsl(147, 50%, 47%). Its relative luminance is 0.344, giving 2.67:1 against white and 7.88:1 against black, so it works as a text color on black. #### Medium Sea Green in every notation | HEX | #3CB371 | | RGB | rgb(60, 179, 113) | | HSL | hsl(147, 50%, 47%) | | Relative luminance | 0.3439 | | Contrast on white | 2.67:1 AA fail | | Contrast on black | 7.88:1 AA pass | #### Tints and shades of mediumseagreen #E2F4EA #BBE4CD #8AD1AA #5FC18B #3CB371 #339860 #297A4D #1E5A39 #133924 Built by mixing mediumseagreen toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #2E8B57 Sea Green #66CDAA Medium Aquamarine #90EE90 Light Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for mediumseagreen? mediumseagreen is #3CB371, which is rgb(60, 179, 113) and hsl(147, 50%, 47%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is mediumseagreen light or dark? Medium Sea Green has a relative luminance of 0.344 on a 0–1 scale, so it is a dark color. Against white it scores 2.67:1; against black, 7.88:1. ##### Can I use mediumseagreen for text? mediumseagreen reaches 7.88:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #7B68EE Medium Slate Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/mediumslateblue ### #7B68EE — Medium Slate Blue Medium Slate Blue is the CSS named color #7B68EE — rgb(123, 104, 238), hsl(249, 80%, 67%). Its relative luminance is 0.203, giving 4.15:1 against white and 5.06:1 against black, so it works as a text color on black. #### Medium Slate Blue in every notation | HEX | #7B68EE | | RGB | rgb(123, 104, 238) | | HSL | hsl(249, 80%, 67%) | | Relative luminance | 0.2028 | | Contrast on white | 4.15:1 large text only | | Contrast on black | 5.06:1 AA pass | #### Tints and shades of mediumslateblue #EBE8FC #D1CAF9 #B0A4F5 #9383F1 #7B68EE #6958CA #5447A2 #3E3477 #27214C Built by mixing mediumslateblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #6A5ACD Slate Blue #4169E1 Royal Blue #9370DB Medium Purple Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for mediumslateblue? mediumslateblue is #7B68EE, which is rgb(123, 104, 238) and hsl(249, 80%, 67%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is mediumslateblue light or dark? Medium Slate Blue has a relative luminance of 0.203 on a 0–1 scale, so it is a dark color. Against white it scores 4.15:1; against black, 5.06:1. ##### Can I use mediumslateblue for text? mediumslateblue reaches 5.06:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #00FA9A Medium Spring Green — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/mediumspringgreen ### #00FA9A — Medium Spring Green Medium Spring Green is the CSS named color #00FA9A — rgb(0, 250, 154), hsl(157, 100%, 49%). Its relative luminance is 0.707, giving 1.39:1 against white and 15.14:1 against black, so it works as a text color on black. #### Medium Spring Green in every notation | HEX | #00FA9A | | RGB | rgb(0, 250, 154) | | HSL | hsl(157, 100%, 49%) | | Relative luminance | 0.7070 | | Contrast on white | 1.39:1 AA fail | | Contrast on black | 15.14:1 AA pass | #### Tints and shades of mediumspringgreen #D9FEF0 #A6FDDC #66FCC2 #2EFBAC #00FA9A #00D583 #00AA69 #007D4D #005031 Built by mixing mediumspringgreen toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #00FF7F Spring Green #98FB98 Pale Green #90EE90 Light Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for mediumspringgreen? mediumspringgreen is #00FA9A, which is rgb(0, 250, 154) and hsl(157, 100%, 49%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is mediumspringgreen light or dark? Medium Spring Green has a relative luminance of 0.707 on a 0–1 scale, so it is a light color. Against white it scores 1.39:1; against black, 15.14:1. ##### Can I use mediumspringgreen for text? mediumspringgreen reaches 15.14:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #48D1CC Medium Turquoise — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/mediumturquoise ### #48D1CC — Medium Turquoise Medium Turquoise is the CSS named color #48D1CC — rgb(72, 209, 204), hsl(178, 60%, 55%). Its relative luminance is 0.513, giving 1.86:1 against white and 11.27:1 against black, so it works as a text color on black. #### Medium Turquoise in every notation | HEX | #48D1CC | | RGB | rgb(72, 209, 204) | | HSL | hsl(178, 60%, 55%) | | Relative luminance | 0.5134 | | Contrast on white | 1.86:1 AA fail | | Contrast on black | 11.27:1 AA pass | #### Tints and shades of mediumturquoise #E4F8F7 #BFEFED #91E3E0 #69D9D5 #48D1CC #3DB2AD #318E8B #246966 #174341 Built by mixing mediumturquoise toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #00CED1 Dark Turquoise #40E0D0 Turquoise #20B2AA Light Sea Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for mediumturquoise? mediumturquoise is #48D1CC, which is rgb(72, 209, 204) and hsl(178, 60%, 55%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is mediumturquoise light or dark? Medium Turquoise has a relative luminance of 0.513 on a 0–1 scale, so it is a light color. Against white it scores 1.86:1; against black, 11.27:1. ##### Can I use mediumturquoise for text? mediumturquoise reaches 11.27:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #C71585 Medium Violet Red — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/mediumvioletred ### #C71585 — Medium Violet Red Medium Violet Red is the CSS named color #C71585 — rgb(199, 21, 133), hsl(322, 81%, 43%). Its relative luminance is 0.144, giving 5.42:1 against white and 3.87:1 against black, so it works as a text color on white. #### Medium Violet Red in every notation | HEX | #C71585 | | RGB | rgb(199, 21, 133) | | HSL | hsl(322, 81%, 43%) | | Relative luminance | 0.1437 | | Contrast on white | 5.42:1 AA pass | | Contrast on black | 3.87:1 large text only | #### Tints and shades of mediumvioletred #F7DCED #EBADD4 #DD73B6 #D13F9B #C71585 #A91271 #870E5A #640B43 #40072B Built by mixing mediumvioletred toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FF1493 Deep Pink #FF69B4 Hot Pink #8B008B Dark Magenta Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for mediumvioletred? mediumvioletred is #C71585, which is rgb(199, 21, 133) and hsl(322, 81%, 43%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is mediumvioletred light or dark? Medium Violet Red has a relative luminance of 0.144 on a 0–1 scale, so it is a dark color. Against white it scores 5.42:1; against black, 3.87:1. ##### Can I use mediumvioletred for text? mediumvioletred reaches 5.42:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #191970 Midnight Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/midnightblue ### #191970 — Midnight Blue Midnight Blue is the CSS named color #191970 — rgb(25, 25, 112), hsl(240, 64%, 27%). Its relative luminance is 0.021, giving 14.85:1 against white and 1.41:1 against black, so it works as a text color on white. #### Midnight Blue in every notation | HEX | #191970 | | RGB | rgb(25, 25, 112) | | HSL | hsl(240, 64%, 27%) | | Relative luminance | 0.0207 | | Contrast on white | 14.85:1 AA pass | | Contrast on black | 1.41:1 AA fail | #### Tints and shades of midnightblue #DDDDEA #AFAFCD #7575A9 #42428A #191970 #15155F #11114C #0D0D38 #080824 Built by mixing midnightblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #483D8B Dark Slate Blue #663399 Rebecca Purple #4B0082 Indigo Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for midnightblue? midnightblue is #191970, which is rgb(25, 25, 112) and hsl(240, 64%, 27%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is midnightblue light or dark? Midnight Blue has a relative luminance of 0.021 on a 0–1 scale, so it is a dark color. Against white it scores 14.85:1; against black, 1.41:1. ##### Can I use midnightblue for text? midnightblue reaches 14.85:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #F5FFFA Mint Cream — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/mintcream ### #F5FFFA — Mint Cream Mint Cream is the CSS named color #F5FFFA — rgb(245, 255, 250), hsl(150, 100%, 98%). Its relative luminance is 0.978, giving 1.02:1 against white and 20.57:1 against black, so it works as a text color on black. #### Mint Cream in every notation | HEX | #F5FFFA | | RGB | rgb(245, 255, 250) | | HSL | hsl(150, 100%, 98%) | | Relative luminance | 0.9783 | | Contrast on white | 1.02:1 AA fail | | Contrast on black | 20.57:1 AA pass | #### Tints and shades of mintcream #FEFFFE #FCFFFD #F9FFFC #F7FFFB #F5FFFA #D0D9D5 #A7ADAA #7B807D #4E5250 Built by mixing mintcream toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #F0FFFF Azure #FFFFFF White #F5F5F5 White Smoke Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for mintcream? mintcream is #F5FFFA, which is rgb(245, 255, 250) and hsl(150, 100%, 98%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is mintcream light or dark? Mint Cream has a relative luminance of 0.978 on a 0–1 scale, so it is a light color. Against white it scores 1.02:1; against black, 20.57:1. ##### Can I use mintcream for text? mintcream reaches 20.57:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFE4E1 Misty Rose — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/mistyrose ### #FFE4E1 — Misty Rose Misty Rose is the CSS named color #FFE4E1 — rgb(255, 228, 225), hsl(6, 100%, 94%). Its relative luminance is 0.822, giving 1.20:1 against white and 17.44:1 against black, so it works as a text color on black. #### Misty Rose in every notation | HEX | #FFE4E1 | | RGB | rgb(255, 228, 225) | | HSL | hsl(6, 100%, 94%) | | Relative luminance | 0.8218 | | Contrast on white | 1.20:1 AA fail | | Contrast on black | 17.44:1 AA pass | #### Tints and shades of mistyrose #FFFBFB #FFF6F5 #FFEFED #FFE9E6 #FFE4E1 #D9C2BF #AD9B99 #807271 #524948 Built by mixing mistyrose toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFF0F5 Lavender Blush #FAF0E6 Linen #FFF5EE Seashell Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for mistyrose? mistyrose is #FFE4E1, which is rgb(255, 228, 225) and hsl(6, 100%, 94%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is mistyrose light or dark? Misty Rose has a relative luminance of 0.822 on a 0–1 scale, so it is a light color. Against white it scores 1.20:1; against black, 17.44:1. ##### Can I use mistyrose for text? mistyrose reaches 17.44:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFE4B5 Moccasin — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/moccasin ### #FFE4B5 — Moccasin Moccasin is the CSS named color #FFE4B5 — rgb(255, 228, 181), hsl(38, 100%, 85%). Its relative luminance is 0.801, giving 1.23:1 against white and 17.02:1 against black, so it works as a text color on black. #### Moccasin in every notation | HEX | #FFE4B5 | | RGB | rgb(255, 228, 181) | | HSL | hsl(38, 100%, 85%) | | Relative luminance | 0.8008 | | Contrast on white | 1.23:1 AA fail | | Contrast on black | 17.02:1 AA pass | #### Tints and shades of moccasin #FFFBF4 #FFF6E5 #FFEFD3 #FFE9C2 #FFE4B5 #D9C29A #AD9B7B #80725B #52493A Built by mixing moccasin toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFDEAD Navajo White #F5DEB3 Wheat #FFE4C4 Bisque Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for moccasin? moccasin is #FFE4B5, which is rgb(255, 228, 181) and hsl(38, 100%, 85%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is moccasin light or dark? Moccasin has a relative luminance of 0.801 on a 0–1 scale, so it is a light color. Against white it scores 1.23:1; against black, 17.02:1. ##### Can I use moccasin for text? moccasin reaches 17.02:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFDEAD Navajo White — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/navajowhite ### #FFDEAD — Navajo White Navajo White is the CSS named color #FFDEAD — rgb(255, 222, 173), hsl(36, 100%, 84%). Its relative luminance is 0.765, giving 1.29:1 against white and 16.30:1 against black, so it works as a text color on black. #### Navajo White in every notation | HEX | #FFDEAD | | RGB | rgb(255, 222, 173) | | HSL | hsl(36, 100%, 84%) | | Relative luminance | 0.7652 | | Contrast on white | 1.29:1 AA fail | | Contrast on black | 16.30:1 AA pass | #### Tints and shades of navajowhite #FFFAF3 #FFF3E2 #FFEBCE #FFE4BC #FFDEAD #D9BD93 #AD9776 #806F57 #524737 Built by mixing navajowhite toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFE4B5 Moccasin #F5DEB3 Wheat #FFDAB9 Peach Puff Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for navajowhite? navajowhite is #FFDEAD, which is rgb(255, 222, 173) and hsl(36, 100%, 84%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is navajowhite light or dark? Navajo White has a relative luminance of 0.765 on a 0–1 scale, so it is a light color. Against white it scores 1.29:1; against black, 16.30:1. ##### Can I use navajowhite for text? navajowhite reaches 16.30:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #000080 Navy — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/navy ### #000080 — Navy Navy is the CSS named color #000080 — rgb(0, 0, 128), hsl(240, 100%, 25%). Its relative luminance is 0.016, giving 16.01:1 against white and 1.31:1 against black, so it works as a text color on white. #### Navy in every notation | HEX | #000080 | | RGB | rgb(0, 0, 128) | | HSL | hsl(240, 100%, 25%) | | Relative luminance | 0.0156 | | Contrast on white | 16.01:1 AA pass | | Contrast on black | 1.31:1 AA fail | #### Tints and shades of navy #D9D9EC #A6A6D3 #6666B3 #2E2E97 #000080 #00006D #000057 #000040 #000029 Built by mixing navy toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #00008B Dark Blue #4B0082 Indigo #191970 Midnight Blue Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for navy? navy is #000080, which is rgb(0, 0, 128) and hsl(240, 100%, 25%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is navy light or dark? Navy has a relative luminance of 0.016 on a 0–1 scale, so it is a dark color. Against white it scores 16.01:1; against black, 1.31:1. ##### Can I use navy for text? navy reaches 16.01:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FDF5E6 Old Lace — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/oldlace ### #FDF5E6 — Old Lace Old Lace is the CSS named color #FDF5E6 — rgb(253, 245, 230), hsl(39, 85%, 95%). Its relative luminance is 0.919, giving 1.08:1 against white and 19.38:1 against black, so it works as a text color on black. #### Old Lace in every notation | HEX | #FDF5E6 | | RGB | rgb(253, 245, 230) | | HSL | hsl(39, 85%, 95%) | | Relative luminance | 0.9190 | | Contrast on white | 1.08:1 AA fail | | Contrast on black | 19.38:1 AA pass | #### Tints and shades of oldlace #FFFEFB #FEFCF6 #FEF9F0 #FDF7EB #FDF5E6 #D7D0C4 #ACA79C #7F7B73 #514E4A Built by mixing oldlace toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FAF0E6 Linen #FFFAF0 Floral White #FFFFF0 Ivory Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for oldlace? oldlace is #FDF5E6, which is rgb(253, 245, 230) and hsl(39, 85%, 95%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is oldlace light or dark? Old Lace has a relative luminance of 0.919 on a 0–1 scale, so it is a light color. Against white it scores 1.08:1; against black, 19.38:1. ##### Can I use oldlace for text? oldlace reaches 19.38:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #808000 Olive — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/olive ### #808000 — Olive Olive is the CSS named color #808000 — rgb(128, 128, 0), hsl(60, 100%, 25%). Its relative luminance is 0.200, giving 4.20:1 against white and 5.01:1 against black, so it works as a text color on black. #### Olive in every notation | HEX | #808000 | | RGB | rgb(128, 128, 0) | | HSL | hsl(60, 100%, 25%) | | Relative luminance | 0.2003 | | Contrast on white | 4.20:1 large text only | | Contrast on black | 5.01:1 AA pass | #### Tints and shades of olive #ECECD9 #D3D3A6 #B3B366 #97972E #808000 #6D6D00 #575700 #404000 #292900 Built by mixing olive toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #6B8E23 Olive Drab #B8860B Dark Goldenrod #BDB76B Dark Khaki Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for olive? olive is #808000, which is rgb(128, 128, 0) and hsl(60, 100%, 25%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is olive light or dark? Olive has a relative luminance of 0.200 on a 0–1 scale, so it is a dark color. Against white it scores 4.20:1; against black, 5.01:1. ##### Can I use olive for text? olive reaches 5.01:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #6B8E23 Olive Drab — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/olivedrab ### #6B8E23 — Olive Drab Olive Drab is the CSS named color #6B8E23 — rgb(107, 142, 35), hsl(80, 60%, 35%). Its relative luminance is 0.226, giving 3.81:1 against white and 5.52:1 against black, so it works as a text color on black. #### Olive Drab in every notation | HEX | #6B8E23 | | RGB | rgb(107, 142, 35) | | HSL | hsl(80, 60%, 35%) | | Relative luminance | 0.2259 | | Contrast on white | 3.81:1 large text only | | Contrast on black | 5.52:1 AA pass | #### Tints and shades of olivedrab #E9EEDE #CBD7B2 #A6BB7B #86A24B #6B8E23 #5B791E #496118 #364712 #222D0B Built by mixing olivedrab toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #808000 Olive #228B22 Forest Green #556B2F Dark Olive Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for olivedrab? olivedrab is #6B8E23, which is rgb(107, 142, 35) and hsl(80, 60%, 35%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is olivedrab light or dark? Olive Drab has a relative luminance of 0.226 on a 0–1 scale, so it is a dark color. Against white it scores 3.81:1; against black, 5.52:1. ##### Can I use olivedrab for text? olivedrab reaches 5.52:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFA500 Orange — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/orange ### #FFA500 — Orange Orange is the CSS named color #FFA500 — rgb(255, 165, 0), hsl(39, 100%, 50%). Its relative luminance is 0.482, giving 1.97:1 against white and 10.63:1 against black, so it works as a text color on black. #### Orange in every notation | HEX | #FFA500 | | RGB | rgb(255, 165, 0) | | HSL | hsl(39, 100%, 50%) | | Relative luminance | 0.4817 | | Contrast on white | 1.97:1 AA fail | | Contrast on black | 10.63:1 AA pass | #### Tints and shades of orange #FFF2D9 #FFE0A6 #FFC966 #FFB52E #FFA500 #D98C00 #AD7000 #805300 #523500 Built by mixing orange toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FF8C00 Dark Orange #DAA520 Goldenrod #B8860B Dark Goldenrod Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for orange? orange is #FFA500, which is rgb(255, 165, 0) and hsl(39, 100%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is orange light or dark? Orange has a relative luminance of 0.482 on a 0–1 scale, so it is a dark color. Against white it scores 1.97:1; against black, 10.63:1. ##### Can I use orange for text? orange reaches 10.63:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FF4500 Orange Red — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/orangered ### #FF4500 — Orange Red Orange Red is the CSS named color #FF4500 — rgb(255, 69, 0), hsl(16, 100%, 50%). Its relative luminance is 0.255, giving 3.44:1 against white and 6.10:1 against black, so it works as a text color on black. #### Orange Red in every notation | HEX | #FF4500 | | RGB | rgb(255, 69, 0) | | HSL | hsl(16, 100%, 50%) | | Relative luminance | 0.2552 | | Contrast on white | 3.44:1 large text only | | Contrast on black | 6.10:1 AA pass | #### Tints and shades of orangered #FFE3D9 #FFBEA6 #FF8F66 #FF662E #FF4500 #D93B00 #AD2F00 #802300 #521600 Built by mixing orangered toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FF0000 Red #FF6347 Tomato #FF7F50 Coral Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for orangered? orangered is #FF4500, which is rgb(255, 69, 0) and hsl(16, 100%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is orangered light or dark? Orange Red has a relative luminance of 0.255 on a 0–1 scale, so it is a dark color. Against white it scores 3.44:1; against black, 6.10:1. ##### Can I use orangered for text? orangered reaches 6.10:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #DA70D6 Orchid — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/orchid ### #DA70D6 — Orchid Orchid is the CSS named color #DA70D6 — rgb(218, 112, 214), hsl(302, 59%, 65%). Its relative luminance is 0.313, giving 2.89:1 against white and 7.27:1 against black, so it works as a text color on black. #### Orchid in every notation | HEX | #DA70D6 | | RGB | rgb(218, 112, 214) | | HSL | hsl(302, 59%, 65%) | | Relative luminance | 0.3135 | | Contrast on white | 2.89:1 AA fail | | Contrast on black | 7.27:1 AA pass | #### Tints and shades of orchid #F9EAF9 #F2CDF1 #E9A9E6 #E18ADD #DA70D6 #B95FB6 #944C92 #6D386B #462444 Built by mixing orchid toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #EE82EE Violet #BA55D3 Medium Orchid #9370DB Medium Purple Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for orchid? orchid is #DA70D6, which is rgb(218, 112, 214) and hsl(302, 59%, 65%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is orchid light or dark? Orchid has a relative luminance of 0.313 on a 0–1 scale, so it is a dark color. Against white it scores 2.89:1; against black, 7.27:1. ##### Can I use orchid for text? orchid reaches 7.27:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #EEE8AA Pale Goldenrod — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/palegoldenrod ### #EEE8AA — Pale Goldenrod Pale Goldenrod is the CSS named color #EEE8AA — rgb(238, 232, 170), hsl(55, 67%, 80%). Its relative luminance is 0.788, giving 1.25:1 against white and 16.76:1 against black, so it works as a text color on black. #### Pale Goldenrod in every notation | HEX | #EEE8AA | | RGB | rgb(238, 232, 170) | | HSL | hsl(55, 67%, 80%) | | Relative luminance | 0.7879 | | Contrast on white | 1.25:1 AA fail | | Contrast on black | 16.76:1 AA pass | #### Tints and shades of palegoldenrod #FCFCF2 #F9F7E1 #F5F1CC #F1ECB9 #EEE8AA #CAC591 #A29E74 #777455 #4C4A36 Built by mixing palegoldenrod toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFE4B5 Moccasin #FFFACD Lemon Chiffon #F5DEB3 Wheat Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for palegoldenrod? palegoldenrod is #EEE8AA, which is rgb(238, 232, 170) and hsl(55, 67%, 80%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is palegoldenrod light or dark? Pale Goldenrod has a relative luminance of 0.788 on a 0–1 scale, so it is a light color. Against white it scores 1.25:1; against black, 16.76:1. ##### Can I use palegoldenrod for text? palegoldenrod reaches 16.76:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #98FB98 Pale Green — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/palegreen ### #98FB98 — Pale Green Pale Green is the CSS named color #98FB98 — rgb(152, 251, 152), hsl(120, 93%, 79%). Its relative luminance is 0.779, giving 1.27:1 against white and 16.59:1 against black, so it works as a text color on black. #### Pale Green in every notation | HEX | #98FB98 | | RGB | rgb(152, 251, 152) | | HSL | hsl(120, 93%, 79%) | | Relative luminance | 0.7794 | | Contrast on white | 1.27:1 AA fail | | Contrast on black | 16.59:1 AA pass | #### Tints and shades of palegreen #F0FEF0 #DBFEDB #C1FDC1 #ABFCAB #98FB98 #81D581 #67AB67 #4C7E4C #315031 Built by mixing palegreen toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #90EE90 Light Green #00FA9A Medium Spring Green #7FFFD4 Aquamarine Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for palegreen? palegreen is #98FB98, which is rgb(152, 251, 152) and hsl(120, 93%, 79%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is palegreen light or dark? Pale Green has a relative luminance of 0.779 on a 0–1 scale, so it is a light color. Against white it scores 1.27:1; against black, 16.59:1. ##### Can I use palegreen for text? palegreen reaches 16.59:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #AFEEEE Pale Turquoise — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/paleturquoise ### #AFEEEE — Pale Turquoise Pale Turquoise is the CSS named color #AFEEEE — rgb(175, 238, 238), hsl(180, 65%, 81%). Its relative luminance is 0.764, giving 1.29:1 against white and 16.29:1 against black, so it works as a text color on black. #### Pale Turquoise in every notation | HEX | #AFEEEE | | RGB | rgb(175, 238, 238) | | HSL | hsl(180, 65%, 81%) | | Relative luminance | 0.7644 | | Contrast on white | 1.29:1 AA fail | | Contrast on black | 16.29:1 AA pass | #### Tints and shades of paleturquoise #F3FCFC #E3F9F9 #CFF5F5 #BDF1F1 #AFEEEE #95CACA #77A2A2 #587777 #384C4C Built by mixing paleturquoise toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #B0E0E6 Powder Blue #ADD8E6 Light Blue #E0FFFF Light Cyan Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for paleturquoise? paleturquoise is #AFEEEE, which is rgb(175, 238, 238) and hsl(180, 65%, 81%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is paleturquoise light or dark? Pale Turquoise has a relative luminance of 0.764 on a 0–1 scale, so it is a light color. Against white it scores 1.29:1; against black, 16.29:1. ##### Can I use paleturquoise for text? paleturquoise reaches 16.29:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #DB7093 Pale Violet Red — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/palevioletred ### #DB7093 — Pale Violet Red Pale Violet Red is the CSS named color #DB7093 — rgb(219, 112, 147), hsl(340, 60%, 65%). Its relative luminance is 0.288, giving 3.11:1 against white and 6.75:1 against black, so it works as a text color on black. #### Pale Violet Red in every notation | HEX | #DB7093 | | RGB | rgb(219, 112, 147) | | HSL | hsl(340, 60%, 65%) | | Relative luminance | 0.2875 | | Contrast on white | 3.11:1 large text only | | Contrast on black | 6.75:1 AA pass | #### Tints and shades of palevioletred #FAEAEF #F2CDD9 #E9A9BE #E18AA6 #DB7093 #BA5F7D #954C64 #6E384A #46242F Built by mixing palevioletred toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #F08080 Light Coral #FF69B4 Hot Pink #CD5C5C Indian Red Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for palevioletred? palevioletred is #DB7093, which is rgb(219, 112, 147) and hsl(340, 60%, 65%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is palevioletred light or dark? Pale Violet Red has a relative luminance of 0.288 on a 0–1 scale, so it is a dark color. Against white it scores 3.11:1; against black, 6.75:1. ##### Can I use palevioletred for text? palevioletred reaches 6.75:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFEFD5 Papaya Whip — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/papayawhip ### #FFEFD5 — Papaya Whip Papaya Whip is the CSS named color #FFEFD5 — rgb(255, 239, 213), hsl(37, 100%, 92%). Its relative luminance is 0.878, giving 1.13:1 against white and 18.56:1 against black, so it works as a text color on black. #### Papaya Whip in every notation | HEX | #FFEFD5 | | RGB | rgb(255, 239, 213) | | HSL | hsl(37, 100%, 92%) | | Relative luminance | 0.8780 | | Contrast on white | 1.13:1 AA fail | | Contrast on black | 18.56:1 AA pass | #### Tints and shades of papayawhip #FFFDF9 #FFF9F0 #FFF5E6 #FFF2DD #FFEFD5 #D9CBB5 #ADA391 #80786B #524C44 Built by mixing papayawhip toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFEBCD Blanched Almond #FAEBD7 Antique White #FFF8DC Cornsilk Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for papayawhip? papayawhip is #FFEFD5, which is rgb(255, 239, 213) and hsl(37, 100%, 92%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is papayawhip light or dark? Papaya Whip has a relative luminance of 0.878 on a 0–1 scale, so it is a light color. Against white it scores 1.13:1; against black, 18.56:1. ##### Can I use papayawhip for text? papayawhip reaches 18.56:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFDAB9 Peach Puff — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/peachpuff ### #FFDAB9 — Peach Puff Peach Puff is the CSS named color #FFDAB9 — rgb(255, 218, 185), hsl(28, 100%, 86%). Its relative luminance is 0.749, giving 1.31:1 against white and 15.98:1 against black, so it works as a text color on black. #### Peach Puff in every notation | HEX | #FFDAB9 | | RGB | rgb(255, 218, 185) | | HSL | hsl(28, 100%, 86%) | | Relative luminance | 0.7491 | | Contrast on white | 1.31:1 AA fail | | Contrast on black | 15.98:1 AA pass | #### Tints and shades of peachpuff #FFF9F5 #FFF2E7 #FFE9D5 #FFE1C6 #FFDAB9 #D9B99D #AD947E #806D5D #52463B Built by mixing peachpuff toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFE4C4 Bisque #F5DEB3 Wheat #FFDEAD Navajo White Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for peachpuff? peachpuff is #FFDAB9, which is rgb(255, 218, 185) and hsl(28, 100%, 86%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is peachpuff light or dark? Peach Puff has a relative luminance of 0.749 on a 0–1 scale, so it is a light color. Against white it scores 1.31:1; against black, 15.98:1. ##### Can I use peachpuff for text? peachpuff reaches 15.98:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #CD853F Peru — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/peru ### #CD853F — Peru Peru is the CSS named color #CD853F — rgb(205, 133, 63), hsl(30, 59%, 53%). Its relative luminance is 0.301, giving 2.99:1 against white and 7.02:1 against black, so it works as a text color on black. #### Peru in every notation | HEX | #CD853F | | RGB | rgb(205, 133, 63) | | HSL | hsl(30, 59%, 53%) | | Relative luminance | 0.3011 | | Contrast on white | 2.99:1 AA fail | | Contrast on black | 7.02:1 AA pass | #### Tints and shades of peru #F8EDE2 #EED4BC #E1B68C #D69B62 #CD853F #AE7136 #8B5A2B #674320 #422B14 Built by mixing peru toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #F4A460 Sandy Brown #D2691E Chocolate #B8860B Dark Goldenrod Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for peru? peru is #CD853F, which is rgb(205, 133, 63) and hsl(30, 59%, 53%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is peru light or dark? Peru has a relative luminance of 0.301 on a 0–1 scale, so it is a dark color. Against white it scores 2.99:1; against black, 7.02:1. ##### Can I use peru for text? peru reaches 7.02:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFC0CB Pink — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/pink ### #FFC0CB — Pink Pink is the CSS named color #FFC0CB — rgb(255, 192, 203), hsl(350, 100%, 88%). Its relative luminance is 0.633, giving 1.54:1 against white and 13.65:1 against black, so it works as a text color on black. #### Pink in every notation | HEX | #FFC0CB | | RGB | rgb(255, 192, 203) | | HSL | hsl(350, 100%, 88%) | | Relative luminance | 0.6327 | | Contrast on white | 1.54:1 AA fail | | Contrast on black | 13.65:1 AA pass | #### Tints and shades of pink #FFF6F7 #FFE9ED #FFD9E0 #FFCBD4 #FFC0CB #D9A3AD #AD838A #806066 #523D41 Built by mixing pink toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFB6C1 Light Pink #D8BFD8 Thistle #FFE4E1 Misty Rose Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for pink? pink is #FFC0CB, which is rgb(255, 192, 203) and hsl(350, 100%, 88%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is pink light or dark? Pink has a relative luminance of 0.633 on a 0–1 scale, so it is a light color. Against white it scores 1.54:1; against black, 13.65:1. ##### Can I use pink for text? pink reaches 13.65:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #DDA0DD Plum — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/plum ### #DDA0DD — Plum Plum is the CSS named color #DDA0DD — rgb(221, 160, 221), hsl(300, 47%, 75%). Its relative luminance is 0.457, giving 2.07:1 against white and 10.15:1 against black, so it works as a text color on black. #### Plum in every notation | HEX | #DDA0DD | | RGB | rgb(221, 160, 221) | | HSL | hsl(300, 47%, 75%) | | Relative luminance | 0.4573 | | Contrast on white | 2.07:1 AA fail | | Contrast on black | 10.15:1 AA pass | #### Tints and shades of plum #FAF1FA #F3DEF3 #EBC6EB #E3B1E3 #DDA0DD #BC88BC #966D96 #6F506F #473347 Built by mixing plum toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #D8BFD8 Thistle #DA70D6 Orchid #EE82EE Violet Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for plum? plum is #DDA0DD, which is rgb(221, 160, 221) and hsl(300, 47%, 75%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is plum light or dark? Plum has a relative luminance of 0.457 on a 0–1 scale, so it is a dark color. Against white it scores 2.07:1; against black, 10.15:1. ##### Can I use plum for text? plum reaches 10.15:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #B0E0E6 Powder Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/powderblue ### #B0E0E6 — Powder Blue Powder Blue is the CSS named color #B0E0E6 — rgb(176, 224, 230), hsl(187, 52%, 80%). Its relative luminance is 0.683, giving 1.43:1 against white and 14.65:1 against black, so it works as a text color on black. #### Powder Blue in every notation | HEX | #B0E0E6 | | RGB | rgb(176, 224, 230) | | HSL | hsl(187, 52%, 80%) | | Relative luminance | 0.6825 | | Contrast on white | 1.43:1 AA fail | | Contrast on black | 14.65:1 AA pass | #### Tints and shades of powderblue #F3FAFB #E3F4F6 #D0ECF0 #BEE6EB #B0E0E6 #96BEC4 #78989C #587073 #38484A Built by mixing powderblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #ADD8E6 Light Blue #AFEEEE Pale Turquoise #E0FFFF Light Cyan Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for powderblue? powderblue is #B0E0E6, which is rgb(176, 224, 230) and hsl(187, 52%, 80%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is powderblue light or dark? Powder Blue has a relative luminance of 0.683 on a 0–1 scale, so it is a light color. Against white it scores 1.43:1; against black, 14.65:1. ##### Can I use powderblue for text? powderblue reaches 14.65:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #800080 Purple — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/purple ### #800080 — Purple Purple is the CSS named color #800080 — rgb(128, 0, 128), hsl(300, 100%, 25%). Its relative luminance is 0.061, giving 9.42:1 against white and 2.23:1 against black, so it works as a text color on white. #### Purple in every notation | HEX | #800080 | | RGB | rgb(128, 0, 128) | | HSL | hsl(300, 100%, 25%) | | Relative luminance | 0.0615 | | Contrast on white | 9.42:1 AA pass | | Contrast on black | 2.23:1 AA fail | #### Tints and shades of purple #ECD9EC #D3A6D3 #B366B3 #972E97 #800080 #6D006D #570057 #400040 #290029 Built by mixing purple toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #8B008B Dark Magenta #663399 Rebecca Purple #4B0082 Indigo Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for purple? purple is #800080, which is rgb(128, 0, 128) and hsl(300, 100%, 25%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is purple light or dark? Purple has a relative luminance of 0.061 on a 0–1 scale, so it is a dark color. Against white it scores 9.42:1; against black, 2.23:1. ##### Can I use purple for text? purple reaches 9.42:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #663399 Rebecca Purple — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/rebeccapurple ### #663399 — Rebecca Purple Rebecca Purple is the CSS named color #663399 — rgb(102, 51, 153), hsl(270, 50%, 40%). Its relative luminance is 0.075, giving 8.41:1 against white and 2.50:1 against black, so it works as a text color on white. #### Rebecca Purple in every notation | HEX | #663399 | | RGB | rgb(102, 51, 153) | | HSL | hsl(270, 50%, 40%) | | Relative luminance | 0.0749 | | Contrast on white | 8.41:1 AA pass | | Contrast on black | 2.50:1 AA fail | #### Tints and shades of rebeccapurple #E8E0F0 #C9B8DB #A385C2 #8258AB #663399 #572B82 #452368 #331A4D #211031 Built by mixing rebeccapurple toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #4B0082 Indigo #483D8B Dark Slate Blue #6A5ACD Slate Blue Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for rebeccapurple? rebeccapurple is #663399, which is rgb(102, 51, 153) and hsl(270, 50%, 40%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is rebeccapurple light or dark? Rebecca Purple has a relative luminance of 0.075 on a 0–1 scale, so it is a dark color. Against white it scores 8.41:1; against black, 2.50:1. ##### Can I use rebeccapurple for text? rebeccapurple reaches 8.41:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FF0000 Red — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/red ### #FF0000 — Red Red is the CSS named color #FF0000 — rgb(255, 0, 0), hsl(0, 100%, 50%). Its relative luminance is 0.213, giving 4.00:1 against white and 5.25:1 against black, so it works as a text color on black. #### Red in every notation | HEX | #FF0000 | | RGB | rgb(255, 0, 0) | | HSL | hsl(0, 100%, 50%) | | Relative luminance | 0.2126 | | Contrast on white | 4.00:1 large text only | | Contrast on black | 5.25:1 AA pass | #### Tints and shades of red #FFD9D9 #FFA6A6 #FF6666 #FF2E2E #FF0000 #D90000 #AD0000 #800000 #520000 Built by mixing red toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FF4500 Orange Red #FF6347 Tomato #DC143C Crimson Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for red? red is #FF0000, which is rgb(255, 0, 0) and hsl(0, 100%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is red light or dark? Red has a relative luminance of 0.213 on a 0–1 scale, so it is a dark color. Against white it scores 4.00:1; against black, 5.25:1. ##### Can I use red for text? red reaches 5.25:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #BC8F8F Rosy Brown — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/rosybrown ### #BC8F8F — Rosy Brown Rosy Brown is the CSS named color #BC8F8F — rgb(188, 143, 143), hsl(0, 25%, 65%). Its relative luminance is 0.323, giving 2.81:1 against white and 7.46:1 against black, so it works as a text color on black. #### Rosy Brown in every notation | HEX | #BC8F8F | | RGB | rgb(188, 143, 143) | | HSL | hsl(0, 25%, 65%) | | Relative luminance | 0.3232 | | Contrast on white | 2.81:1 AA fail | | Contrast on black | 7.46:1 AA pass | #### Tints and shades of rosybrown #F5EEEE #E8D8D8 #D7BCBC #C8A3A3 #BC8F8F #A07A7A #806161 #5E4848 #3C2E2E Built by mixing rosybrown toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #A9A9A9 Dark Gray #A9A9A9 Dark Grey #FFB6C1 Light Pink Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for rosybrown? rosybrown is #BC8F8F, which is rgb(188, 143, 143) and hsl(0, 25%, 65%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is rosybrown light or dark? Rosy Brown has a relative luminance of 0.323 on a 0–1 scale, so it is a dark color. Against white it scores 2.81:1; against black, 7.46:1. ##### Can I use rosybrown for text? rosybrown reaches 7.46:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #4169E1 Royal Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/royalblue ### #4169E1 — Royal Blue Royal Blue is the CSS named color #4169E1 — rgb(65, 105, 225), hsl(225, 73%, 57%). Its relative luminance is 0.167, giving 4.85:1 against white and 4.33:1 against black, so it works as a text color on white. #### Royal Blue in every notation | HEX | #4169E1 | | RGB | rgb(65, 105, 225) | | HSL | hsl(225, 73%, 57%) | | Relative luminance | 0.1666 | | Contrast on white | 4.85:1 AA pass | | Contrast on black | 4.33:1 large text only | #### Tints and shades of royalblue #E3E9FB #BDCBF5 #8DA5ED #6384E6 #4169E1 #3759BF #2C4799 #213571 #152248 Built by mixing royalblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #6A5ACD Slate Blue #7B68EE Medium Slate Blue #9370DB Medium Purple Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for royalblue? royalblue is #4169E1, which is rgb(65, 105, 225) and hsl(225, 73%, 57%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is royalblue light or dark? Royal Blue has a relative luminance of 0.167 on a 0–1 scale, so it is a dark color. Against white it scores 4.85:1; against black, 4.33:1. ##### Can I use royalblue for text? royalblue reaches 4.85:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #8B4513 Saddle Brown — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/saddlebrown ### #8B4513 — Saddle Brown Saddle Brown is the CSS named color #8B4513 — rgb(139, 69, 19), hsl(25, 76%, 31%). Its relative luminance is 0.098, giving 7.10:1 against white and 2.96:1 against black, so it works as a text color on white. #### Saddle Brown in every notation | HEX | #8B4513 | | RGB | rgb(139, 69, 19) | | HSL | hsl(25, 76%, 31%) | | Relative luminance | 0.0979 | | Contrast on white | 7.10:1 AA pass | | Contrast on black | 2.96:1 AA fail | #### Tints and shades of saddlebrown #EEE3DC #D6BEAC #B98F71 #A0663D #8B4513 #763B10 #5F2F0D #46230A #2C1606 Built by mixing saddlebrown toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #A0522D Sienna #800000 Maroon #A52A2A Brown Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for saddlebrown? saddlebrown is #8B4513, which is rgb(139, 69, 19) and hsl(25, 76%, 31%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is saddlebrown light or dark? Saddle Brown has a relative luminance of 0.098 on a 0–1 scale, so it is a dark color. Against white it scores 7.10:1; against black, 2.96:1. ##### Can I use saddlebrown for text? saddlebrown reaches 7.10:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FA8072 Salmon — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/salmon ### #FA8072 — Salmon Salmon is the CSS named color #FA8072 — rgb(250, 128, 114), hsl(6, 93%, 71%). Its relative luminance is 0.370, giving 2.50:1 against white and 8.40:1 against black, so it works as a text color on black. #### Salmon in every notation | HEX | #FA8072 | | RGB | rgb(250, 128, 114) | | HSL | hsl(6, 93%, 71%) | | Relative luminance | 0.3698 | | Contrast on white | 2.50:1 AA fail | | Contrast on black | 8.40:1 AA pass | #### Tints and shades of salmon #FEECEA #FDD3CE #FCB3AA #FB978B #FA8072 #D56D61 #AA574E #7D4039 #502924 Built by mixing salmon toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #F08080 Light Coral #CD5C5C Indian Red #FFA07A Light Salmon Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for salmon? salmon is #FA8072, which is rgb(250, 128, 114) and hsl(6, 93%, 71%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is salmon light or dark? Salmon has a relative luminance of 0.370 on a 0–1 scale, so it is a dark color. Against white it scores 2.50:1; against black, 8.40:1. ##### Can I use salmon for text? salmon reaches 8.40:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #F4A460 Sandy Brown — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/sandybrown ### #F4A460 — Sandy Brown Sandy Brown is the CSS named color #F4A460 — rgb(244, 164, 96), hsl(28, 87%, 67%). Its relative luminance is 0.466, giving 2.03:1 against white and 10.33:1 against black, so it works as a text color on black. #### Sandy Brown in every notation | HEX | #F4A460 | | RGB | rgb(244, 164, 96) | | HSL | hsl(28, 87%, 67%) | | Relative luminance | 0.4663 | | Contrast on white | 2.03:1 AA fail | | Contrast on black | 10.33:1 AA pass | #### Tints and shades of sandybrown #FDF1E7 #FBDFC7 #F8C8A0 #F6B47D #F4A460 #CF8B52 #A67041 #7A5230 #4E341F Built by mixing sandybrown toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #CD853F Peru #FFA07A Light Salmon #E9967A Dark Salmon Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for sandybrown? sandybrown is #F4A460, which is rgb(244, 164, 96) and hsl(28, 87%, 67%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is sandybrown light or dark? Sandy Brown has a relative luminance of 0.466 on a 0–1 scale, so it is a dark color. Against white it scores 2.03:1; against black, 10.33:1. ##### Can I use sandybrown for text? sandybrown reaches 10.33:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #2E8B57 Sea Green — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/seagreen ### #2E8B57 — Sea Green Sea Green is the CSS named color #2E8B57 — rgb(46, 139, 87), hsl(146, 50%, 36%). Its relative luminance is 0.197, giving 4.25:1 against white and 4.95:1 against black, so it works as a text color on black. #### Sea Green in every notation | HEX | #2E8B57 | | RGB | rgb(46, 139, 87) | | HSL | hsl(146, 50%, 36%) | | Relative luminance | 0.1973 | | Contrast on white | 4.25:1 large text only | | Contrast on black | 4.95:1 AA pass | #### Tints and shades of seagreen #E0EEE6 #B6D6C4 #82B99A #54A075 #2E8B57 #27764A #1F5F3B #17462C #0F2C1C Built by mixing seagreen toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #3CB371 Medium Sea Green #556B2F Dark Olive Green #8FBC8F Dark Sea Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for seagreen? seagreen is #2E8B57, which is rgb(46, 139, 87) and hsl(146, 50%, 36%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is seagreen light or dark? Sea Green has a relative luminance of 0.197 on a 0–1 scale, so it is a dark color. Against white it scores 4.25:1; against black, 4.95:1. ##### Can I use seagreen for text? seagreen reaches 4.95:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFF5EE Seashell — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/seashell ### #FFF5EE — Seashell Seashell is the CSS named color #FFF5EE — rgb(255, 245, 238), hsl(25, 100%, 97%). Its relative luminance is 0.927, giving 1.07:1 against white and 19.55:1 against black, so it works as a text color on black. #### Seashell in every notation | HEX | #FFF5EE | | RGB | rgb(255, 245, 238) | | HSL | hsl(25, 100%, 97%) | | Relative luminance | 0.9274 | | Contrast on white | 1.07:1 AA fail | | Contrast on black | 19.55:1 AA pass | #### Tints and shades of seashell #FFFEFC #FFFCF9 #FFF9F5 #FFF7F1 #FFF5EE #D9D0CA #ADA7A2 #807B77 #524E4C Built by mixing seashell toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FAF0E6 Linen #FFFAF0 Floral White #FDF5E6 Old Lace Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for seashell? seashell is #FFF5EE, which is rgb(255, 245, 238) and hsl(25, 100%, 97%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is seashell light or dark? Seashell has a relative luminance of 0.927 on a 0–1 scale, so it is a light color. Against white it scores 1.07:1; against black, 19.55:1. ##### Can I use seashell for text? seashell reaches 19.55:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #A0522D Sienna — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/sienna ### #A0522D — Sienna Sienna is the CSS named color #A0522D — rgb(160, 82, 45), hsl(19, 56%, 40%). Its relative luminance is 0.137, giving 5.62:1 against white and 3.74:1 against black, so it works as a text color on white. #### Sienna in every notation | HEX | #A0522D | | RGB | rgb(160, 82, 45) | | HSL | hsl(19, 56%, 40%) | | Relative luminance | 0.1370 | | Contrast on white | 5.62:1 AA pass | | Contrast on black | 3.74:1 large text only | #### Tints and shades of sienna #F1E5E0 #DEC2B6 #C69781 #B17153 #A0522D #884626 #6D381F #502917 #331A0E Built by mixing sienna toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #8B4513 Saddle Brown #A52A2A Brown #CD5C5C Indian Red Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for sienna? sienna is #A0522D, which is rgb(160, 82, 45) and hsl(19, 56%, 40%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is sienna light or dark? Sienna has a relative luminance of 0.137 on a 0–1 scale, so it is a dark color. Against white it scores 5.62:1; against black, 3.74:1. ##### Can I use sienna for text? sienna reaches 5.62:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #C0C0C0 Silver — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/silver ### #C0C0C0 — Silver Silver is the CSS named color #C0C0C0 — rgb(192, 192, 192), hsl(0, 0%, 75%). Its relative luminance is 0.527, giving 1.82:1 against white and 11.54:1 against black, so it works as a text color on black. #### Silver in every notation | HEX | #C0C0C0 | | RGB | rgb(192, 192, 192) | | HSL | hsl(0, 0%, 75%) | | Relative luminance | 0.5271 | | Contrast on white | 1.82:1 AA fail | | Contrast on black | 11.54:1 AA pass | #### Tints and shades of silver #F6F6F6 #E9E9E9 #D9D9D9 #CBCBCB #C0C0C0 #A3A3A3 #838383 #606060 #3D3D3D Built by mixing silver toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #D3D3D3 Light Gray #D3D3D3 Light Grey #A9A9A9 Dark Gray Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for silver? silver is #C0C0C0, which is rgb(192, 192, 192) and hsl(0, 0%, 75%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is silver light or dark? Silver has a relative luminance of 0.527 on a 0–1 scale, so it is a light color. Against white it scores 1.82:1; against black, 11.54:1. ##### Can I use silver for text? silver reaches 11.54:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #87CEEB Sky Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/skyblue ### #87CEEB — Sky Blue Sky Blue is the CSS named color #87CEEB — rgb(135, 206, 235), hsl(197, 71%, 73%). Its relative luminance is 0.553, giving 1.74:1 against white and 12.06:1 against black, so it works as a text color on black. #### Sky Blue in every notation | HEX | #87CEEB | | RGB | rgb(135, 206, 235) | | HSL | hsl(197, 71%, 73%) | | Relative luminance | 0.5529 | | Contrast on white | 1.74:1 AA fail | | Contrast on black | 12.06:1 AA pass | #### Tints and shades of skyblue #EDF8FC #D5EEF8 #B7E2F3 #9DD7EF #87CEEB #73AFC8 #5C8CA0 #446776 #2B424B Built by mixing skyblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #87CEFA Light Sky Blue #ADD8E6 Light Blue #B0C4DE Light Steel Blue Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for skyblue? skyblue is #87CEEB, which is rgb(135, 206, 235) and hsl(197, 71%, 73%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is skyblue light or dark? Sky Blue has a relative luminance of 0.553 on a 0–1 scale, so it is a light color. Against white it scores 1.74:1; against black, 12.06:1. ##### Can I use skyblue for text? skyblue reaches 12.06:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #6A5ACD Slate Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/slateblue ### #6A5ACD — Slate Blue Slate Blue is the CSS named color #6A5ACD — rgb(106, 90, 205), hsl(248, 53%, 58%). Its relative luminance is 0.148, giving 5.31:1 against white and 3.96:1 against black, so it works as a text color on white. #### Slate Blue in every notation | HEX | #6A5ACD | | RGB | rgb(106, 90, 205) | | HSL | hsl(248, 53%, 58%) | | Relative luminance | 0.1478 | | Contrast on white | 5.31:1 AA pass | | Contrast on black | 3.96:1 large text only | #### Tints and shades of slateblue #E9E6F8 #CBC5EE #A69CE1 #8578D6 #6A5ACD #5A4DAE #483D8B #352D67 #221D42 Built by mixing slateblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #7B68EE Medium Slate Blue #9370DB Medium Purple #4169E1 Royal Blue Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for slateblue? slateblue is #6A5ACD, which is rgb(106, 90, 205) and hsl(248, 53%, 58%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is slateblue light or dark? Slate Blue has a relative luminance of 0.148 on a 0–1 scale, so it is a dark color. Against white it scores 5.31:1; against black, 3.96:1. ##### Can I use slateblue for text? slateblue reaches 5.31:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #708090 Slate Gray — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/slategray ### #708090 — Slate Gray Slate Gray is the CSS named color #708090 — rgb(112, 128, 144), hsl(210, 13%, 50%). Its relative luminance is 0.209, giving 4.05:1 against white and 5.18:1 against black, so it works as a text color on black. #### Slate Gray in every notation | HEX | #708090 | | RGB | rgb(112, 128, 144) | | HSL | hsl(210, 13%, 50%) | | Relative luminance | 0.2090 | | Contrast on white | 4.05:1 large text only | | Contrast on black | 5.18:1 AA pass | #### Tints and shades of slategray #EAECEE #CDD3D8 #A9B3BC #8A97A4 #708090 #5F6D7A #4C5762 #384048 #24292E Built by mixing slategray toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #708090 Slate Grey #778899 Light Slate Gray #778899 Light Slate Grey Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for slategray? slategray is #708090, which is rgb(112, 128, 144) and hsl(210, 13%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is slategray light or dark? Slate Gray has a relative luminance of 0.209 on a 0–1 scale, so it is a dark color. Against white it scores 4.05:1; against black, 5.18:1. ##### Can I use slategray for text? slategray reaches 5.18:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #708090 Slate Grey — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/slategrey ### #708090 — Slate Grey Slate Grey is the CSS named color #708090 — rgb(112, 128, 144), hsl(210, 13%, 50%). Its relative luminance is 0.209, giving 4.05:1 against white and 5.18:1 against black, so it works as a text color on black. #### Slate Grey in every notation | HEX | #708090 | | RGB | rgb(112, 128, 144) | | HSL | hsl(210, 13%, 50%) | | Relative luminance | 0.2090 | | Contrast on white | 4.05:1 large text only | | Contrast on black | 5.18:1 AA pass | #### Tints and shades of slategrey #EAECEE #CDD3D8 #A9B3BC #8A97A4 #708090 #5F6D7A #4C5762 #384048 #24292E Built by mixing slategrey toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #708090 Slate Gray #778899 Light Slate Gray #778899 Light Slate Grey Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for slategrey? slategrey is #708090, which is rgb(112, 128, 144) and hsl(210, 13%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is slategrey light or dark? Slate Grey has a relative luminance of 0.209 on a 0–1 scale, so it is a dark color. Against white it scores 4.05:1; against black, 5.18:1. ##### Can I use slategrey for text? slategrey reaches 5.18:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFFAFA Snow — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/snow ### #FFFAFA — Snow Snow is the CSS named color #FFFAFA — rgb(255, 250, 250), hsl(0, 100%, 99%). Its relative luminance is 0.965, giving 1.03:1 against white and 20.31:1 against black, so it works as a text color on black. #### Snow in every notation | HEX | #FFFAFA | | RGB | rgb(255, 250, 250) | | HSL | hsl(0, 100%, 99%) | | Relative luminance | 0.9653 | | Contrast on white | 1.03:1 AA fail | | Contrast on black | 20.31:1 AA pass | #### Tints and shades of snow #FFFEFE #FFFDFD #FFFCFC #FFFBFB #FFFAFA #D9D5D5 #ADAAAA #807D7D #525050 Built by mixing snow toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFFFFF White #F5F5F5 White Smoke #F8F8FF Ghost White Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for snow? snow is #FFFAFA, which is rgb(255, 250, 250) and hsl(0, 100%, 99%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is snow light or dark? Snow has a relative luminance of 0.965 on a 0–1 scale, so it is a light color. Against white it scores 1.03:1; against black, 20.31:1. ##### Can I use snow for text? snow reaches 20.31:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #00FF7F Spring Green — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/springgreen ### #00FF7F — Spring Green Spring Green is the CSS named color #00FF7F — rgb(0, 255, 127), hsl(150, 100%, 50%). Its relative luminance is 0.731, giving 1.35:1 against white and 15.61:1 against black, so it works as a text color on black. #### Spring Green in every notation | HEX | #00FF7F | | RGB | rgb(0, 255, 127) | | HSL | hsl(150, 100%, 50%) | | Relative luminance | 0.7305 | | Contrast on white | 1.35:1 AA fail | | Contrast on black | 15.61:1 AA pass | #### Tints and shades of springgreen #D9FFEC #A6FFD2 #66FFB2 #2EFF96 #00FF7F #00D96C #00AD56 #008040 #005229 Built by mixing springgreen toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #00FA9A Medium Spring Green #32CD32 Lime Green #98FB98 Pale Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for springgreen? springgreen is #00FF7F, which is rgb(0, 255, 127) and hsl(150, 100%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is springgreen light or dark? Spring Green has a relative luminance of 0.731 on a 0–1 scale, so it is a light color. Against white it scores 1.35:1; against black, 15.61:1. ##### Can I use springgreen for text? springgreen reaches 15.61:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #4682B4 Steel Blue — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/steelblue ### #4682B4 — Steel Blue Steel Blue is the CSS named color #4682B4 — rgb(70, 130, 180), hsl(207, 44%, 49%). Its relative luminance is 0.206, giving 4.11:1 against white and 5.11:1 against black, so it works as a text color on black. #### Steel Blue in every notation | HEX | #4682B4 | | RGB | rgb(70, 130, 180) | | HSL | hsl(207, 44%, 49%) | | Relative luminance | 0.2056 | | Contrast on white | 4.11:1 large text only | | Contrast on black | 5.11:1 AA pass | #### Tints and shades of steelblue #E3ECF4 #BED3E5 #90B4D2 #6799C2 #4682B4 #3C6F99 #30587A #23415A #162A3A Built by mixing steelblue toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #778899 Light Slate Gray #778899 Light Slate Grey #708090 Slate Gray Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for steelblue? steelblue is #4682B4, which is rgb(70, 130, 180) and hsl(207, 44%, 49%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is steelblue light or dark? Steel Blue has a relative luminance of 0.206 on a 0–1 scale, so it is a dark color. Against white it scores 4.11:1; against black, 5.11:1. ##### Can I use steelblue for text? steelblue reaches 5.11:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #D2B48C Tan — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/tan ### #D2B48C — Tan Tan is the CSS named color #D2B48C — rgb(210, 180, 140), hsl(34, 44%, 69%). Its relative luminance is 0.482, giving 1.97:1 against white and 10.65:1 against black, so it works as a text color on black. #### Tan in every notation | HEX | #D2B48C | | RGB | rgb(210, 180, 140) | | HSL | hsl(34, 44%, 69%) | | Relative luminance | 0.4824 | | Contrast on white | 1.97:1 AA fail | | Contrast on black | 10.65:1 AA pass | #### Tints and shades of tan #F8F4EE #EFE5D7 #E4D2BA #DAC2A1 #D2B48C #B39977 #8F7A5F #695A46 #433A2D Built by mixing tan toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #DEB887 Burlywood #F5DEB3 Wheat #FFDAB9 Peach Puff Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for tan? tan is #D2B48C, which is rgb(210, 180, 140) and hsl(34, 44%, 69%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is tan light or dark? Tan has a relative luminance of 0.482 on a 0–1 scale, so it is a dark color. Against white it scores 1.97:1; against black, 10.65:1. ##### Can I use tan for text? tan reaches 10.65:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #008080 Teal — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/teal ### #008080 — Teal Teal is the CSS named color #008080 — rgb(0, 128, 128), hsl(180, 100%, 25%). Its relative luminance is 0.170, giving 4.77:1 against white and 4.40:1 against black, so it works as a text color on white. #### Teal in every notation | HEX | #008080 | | RGB | rgb(0, 128, 128) | | HSL | hsl(180, 100%, 25%) | | Relative luminance | 0.1700 | | Contrast on white | 4.77:1 AA pass | | Contrast on black | 4.40:1 large text only | #### Tints and shades of teal #D9ECEC #A6D3D3 #66B3B3 #2E9797 #008080 #006D6D #005757 #004040 #002929 Built by mixing teal toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #008B8B Dark Cyan #5F9EA0 Cadet Blue #20B2AA Light Sea Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for teal? teal is #008080, which is rgb(0, 128, 128) and hsl(180, 100%, 25%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is teal light or dark? Teal has a relative luminance of 0.170 on a 0–1 scale, so it is a dark color. Against white it scores 4.77:1; against black, 4.40:1. ##### Can I use teal for text? teal reaches 4.77:1 against white, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #D8BFD8 Thistle — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/thistle ### #D8BFD8 — Thistle Thistle is the CSS named color #D8BFD8 — rgb(216, 191, 216), hsl(300, 24%, 80%). Its relative luminance is 0.568, giving 1.70:1 against white and 12.36:1 against black, so it works as a text color on black. #### Thistle in every notation | HEX | #D8BFD8 | | RGB | rgb(216, 191, 216) | | HSL | hsl(300, 24%, 80%) | | Relative luminance | 0.5682 | | Contrast on white | 1.70:1 AA fail | | Contrast on black | 12.36:1 AA pass | #### Tints and shades of thistle #F9F5F9 #F1E9F1 #E8D9E8 #DFCBDF #D8BFD8 #B8A2B8 #938293 #6C606C #453D45 Built by mixing thistle toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #E6E6FA Lavender #B0C4DE Light Steel Blue #C0C0C0 Silver Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for thistle? thistle is #D8BFD8, which is rgb(216, 191, 216) and hsl(300, 24%, 80%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is thistle light or dark? Thistle has a relative luminance of 0.568 on a 0–1 scale, so it is a light color. Against white it scores 1.70:1; against black, 12.36:1. ##### Can I use thistle for text? thistle reaches 12.36:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FF6347 Tomato — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/tomato ### #FF6347 — Tomato Tomato is the CSS named color #FF6347 — rgb(255, 99, 71), hsl(9, 100%, 64%). Its relative luminance is 0.306, giving 2.95:1 against white and 7.13:1 against black, so it works as a text color on black. #### Tomato in every notation | HEX | #FF6347 | | RGB | rgb(255, 99, 71) | | HSL | hsl(9, 100%, 64%) | | Relative luminance | 0.3064 | | Contrast on white | 2.95:1 AA fail | | Contrast on black | 7.13:1 AA pass | #### Tints and shades of tomato #FFE8E3 #FFC8BF #FFA191 #FF7F68 #FF6347 #D9543C #AD4330 #803224 #522017 Built by mixing tomato toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FF7F50 Coral #FA8072 Salmon #DC143C Crimson Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for tomato? tomato is #FF6347, which is rgb(255, 99, 71) and hsl(9, 100%, 64%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is tomato light or dark? Tomato has a relative luminance of 0.306 on a 0–1 scale, so it is a dark color. Against white it scores 2.95:1; against black, 7.13:1. ##### Can I use tomato for text? tomato reaches 7.13:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #40E0D0 Turquoise — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/turquoise ### #40E0D0 — Turquoise Turquoise is the CSS named color #40E0D0 — rgb(64, 224, 208), hsl(174, 72%, 56%). Its relative luminance is 0.590, giving 1.64:1 against white and 12.79:1 against black, so it works as a text color on black. #### Turquoise in every notation | HEX | #40E0D0 | | RGB | rgb(64, 224, 208) | | HSL | hsl(174, 72%, 56%) | | Relative luminance | 0.5896 | | Contrast on white | 1.64:1 AA fail | | Contrast on black | 12.79:1 AA pass | #### Tints and shades of turquoise #E2FAF8 #BCF4EF #8CECE3 #62E6D8 #40E0D0 #36BEB1 #2C988D #207068 #144843 Built by mixing turquoise toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #48D1CC Medium Turquoise #00CED1 Dark Turquoise #00FFFF Aqua Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for turquoise? turquoise is #40E0D0, which is rgb(64, 224, 208) and hsl(174, 72%, 56%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is turquoise light or dark? Turquoise has a relative luminance of 0.590 on a 0–1 scale, so it is a light color. Against white it scores 1.64:1; against black, 12.79:1. ##### Can I use turquoise for text? turquoise reaches 12.79:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #EE82EE Violet — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/violet ### #EE82EE — Violet Violet is the CSS named color #EE82EE — rgb(238, 130, 238), hsl(300, 76%, 72%). Its relative luminance is 0.403, giving 2.32:1 against white and 9.06:1 against black, so it works as a text color on black. #### Violet in every notation | HEX | #EE82EE | | RGB | rgb(238, 130, 238) | | HSL | hsl(300, 76%, 72%) | | Relative luminance | 0.4032 | | Contrast on white | 2.32:1 AA fail | | Contrast on black | 9.06:1 AA pass | #### Tints and shades of violet #FCECFC #F9D3F9 #F5B4F5 #F199F1 #EE82EE #CA6FCA #A258A2 #774177 #4C2A4C Built by mixing violet toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #DA70D6 Orchid #BA55D3 Medium Orchid #FF69B4 Hot Pink Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for violet? violet is #EE82EE, which is rgb(238, 130, 238) and hsl(300, 76%, 72%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is violet light or dark? Violet has a relative luminance of 0.403 on a 0–1 scale, so it is a dark color. Against white it scores 2.32:1; against black, 9.06:1. ##### Can I use violet for text? violet reaches 9.06:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #F5DEB3 Wheat — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/wheat ### #F5DEB3 — Wheat Wheat is the CSS named color #F5DEB3 — rgb(245, 222, 179), hsl(39, 77%, 83%). Its relative luminance is 0.749, giving 1.31:1 against white and 15.98:1 against black, so it works as a text color on black. #### Wheat in every notation | HEX | #F5DEB3 | | RGB | rgb(245, 222, 179) | | HSL | hsl(39, 77%, 83%) | | Relative luminance | 0.7491 | | Contrast on white | 1.31:1 AA fail | | Contrast on black | 15.98:1 AA pass | #### Tints and shades of wheat #FEFAF4 #FCF3E4 #F9EBD1 #F7E4C1 #F5DEB3 #D0BD98 #A7977A #7B6F5A #4E4739 Built by mixing wheat toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFE4B5 Moccasin #FFDEAD Navajo White #FFE4C4 Bisque Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for wheat? wheat is #F5DEB3, which is rgb(245, 222, 179) and hsl(39, 77%, 83%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is wheat light or dark? Wheat has a relative luminance of 0.749 on a 0–1 scale, so it is a light color. Against white it scores 1.31:1; against black, 15.98:1. ##### Can I use wheat for text? wheat reaches 15.98:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFFFFF White — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/white ### #FFFFFF — White White is the CSS named color #FFFFFF — rgb(255, 255, 255), hsl(0, 0%, 100%). Its relative luminance is 1.000, giving 1.00:1 against white and 21.00:1 against black, so it works as a text color on black. #### White in every notation | HEX | #FFFFFF | | RGB | rgb(255, 255, 255) | | HSL | hsl(0, 0%, 100%) | | Relative luminance | 1.0000 | | Contrast on white | 1.00:1 AA fail | | Contrast on black | 21.00:1 AA pass | #### Tints and shades of white #FFFFFF #FFFFFF #FFFFFF #FFFFFF #FFFFFF #D9D9D9 #ADADAD #808080 #525252 Built by mixing white toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFFAFA Snow #F5F5F5 White Smoke #F8F8FF Ghost White Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for white? white is #FFFFFF, which is rgb(255, 255, 255) and hsl(0, 0%, 100%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is white light or dark? White has a relative luminance of 1.000 on a 0–1 scale, so it is a light color. Against white it scores 1.00:1; against black, 21.00:1. ##### Can I use white for text? white reaches 21.00:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #F5F5F5 White Smoke — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/whitesmoke ### #F5F5F5 — White Smoke White Smoke is the CSS named color #F5F5F5 — rgb(245, 245, 245), hsl(0, 0%, 96%). Its relative luminance is 0.913, giving 1.09:1 against white and 19.26:1 against black, so it works as a text color on black. #### White Smoke in every notation | HEX | #F5F5F5 | | RGB | rgb(245, 245, 245) | | HSL | hsl(0, 0%, 96%) | | Relative luminance | 0.9131 | | Contrast on white | 1.09:1 AA fail | | Contrast on black | 19.26:1 AA pass | #### Tints and shades of whitesmoke #FEFEFE #FCFCFC #F9F9F9 #F7F7F7 #F5F5F5 #D0D0D0 #A7A7A7 #7B7B7B #4E4E4E Built by mixing whitesmoke toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFFAFA Snow #FFFFFF White #F8F8FF Ghost White Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for whitesmoke? whitesmoke is #F5F5F5, which is rgb(245, 245, 245) and hsl(0, 0%, 96%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is whitesmoke light or dark? White Smoke has a relative luminance of 0.913 on a 0–1 scale, so it is a light color. Against white it scores 1.09:1; against black, 19.26:1. ##### Can I use whitesmoke for text? whitesmoke reaches 19.26:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #FFFF00 Yellow — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/yellow ### #FFFF00 — Yellow Yellow is the CSS named color #FFFF00 — rgb(255, 255, 0), hsl(60, 100%, 50%). Its relative luminance is 0.928, giving 1.07:1 against white and 19.56:1 against black, so it works as a text color on black. #### Yellow in every notation | HEX | #FFFF00 | | RGB | rgb(255, 255, 0) | | HSL | hsl(60, 100%, 50%) | | Relative luminance | 0.9278 | | Contrast on white | 1.07:1 AA fail | | Contrast on black | 19.56:1 AA pass | #### Tints and shades of yellow #FFFFD9 #FFFFA6 #FFFF66 #FFFF2E #FFFF00 #D9D900 #ADAD00 #808000 #525200 Built by mixing yellow toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #FFD700 Gold #ADFF2F Green Yellow #9ACD32 Yellow Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for yellow? yellow is #FFFF00, which is rgb(255, 255, 0) and hsl(60, 100%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is yellow light or dark? Yellow has a relative luminance of 0.928 on a 0–1 scale, so it is a light color. Against white it scores 1.07:1; against black, 19.56:1. ##### Can I use yellow for text? yellow reaches 19.56:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact --- ## #9ACD32 Yellow Green — Hex Code, RGB & HSL | HexColor Pro URL: https://hexcolorpro.pages.dev/colors/yellowgreen ### #9ACD32 — Yellow Green Yellow Green is the CSS named color #9ACD32 — rgb(154, 205, 50), hsl(80, 61%, 50%). Its relative luminance is 0.508, giving 1.88:1 against white and 11.15:1 against black, so it works as a text color on black. #### Yellow Green in every notation | HEX | #9ACD32 | | RGB | rgb(154, 205, 50) | | HSL | hsl(80, 61%, 50%) | | Relative luminance | 0.5076 | | Contrast on white | 1.88:1 AA fail | | Contrast on black | 11.15:1 AA pass | #### Tints and shades of yellowgreen #F0F8E0 #DCEEB7 #C2E184 #ACD657 #9ACD32 #83AE2B #698B22 #4D6719 #314210 Built by mixing yellowgreen toward white (four steps) and toward black (four steps) while keeping the hue. Use the shades generator for a different step count or to add harmony sets. #### Similar CSS colors #ADFF2F Green Yellow #6B8E23 Olive Drab #32CD32 Lime Green Closest by CIELAB distance (ΔE76). For perceptual matching in a design system, compare in OKLab before locking a token. #### Frequently asked questions ##### What is the hex code for yellowgreen? yellowgreen is #9ACD32, which is rgb(154, 205, 50) and hsl(80, 61%, 50%). It is one of the 148 CSS named colors defined by the CSS Color Module Level 4. ##### Is yellowgreen light or dark? Yellow Green has a relative luminance of 0.508 on a 0–1 scale, so it is a light color. Against white it scores 1.88:1; against black, 11.15:1. ##### Can I use yellowgreen for text? yellowgreen reaches 11.15:1 against black, which clears WCAG 2.2 AA for normal text (4.5:1) at any size. © 2026 HexColor Pro · Home · All CSS colors · Blog · About · Privacy · Terms · Contact