Navy0, 0, 128
KDF Color Tools
Explore Colors, Codes & Palettes
Search by name or HEX, copy every major format, generate harmony palettes, and check contrast —474+ curated colors in one fast library.
Royal Blue
#4169E1rgb(65, 105, 225) · hsl(225, 73%, 57%)Royal Blue
KDF-C-04286945
Popular colors
Seeded favorites, ranked higher as you copy and select locally.
Color library
Showing 36 of ~474 matches. Curated quality library — not millions of random shades.
Color harmony
Generated from the selected color — complementary, analogous, triadic, and more.
Complementary
Analogous
Triadic
Split complementary
Tetradic
Monochromatic
Contrast check
Selected color as text on a background.
Ready-made palettes
Ocean, sunset, luxury, e-commerce, dark mode, and more — copy any role.
Ocean
Calm blues and teal accents for travel, wellness, and SaaS UIs.
- Primary
- Secondary
- Accent
- Background
- Text
Sunset
Warm orange-to-rose gradients for lifestyle and e-commerce heroes.
- Primary
- Secondary
- Accent
- Background
- Text
Nature
Forest greens and soft moss for eco brands and outdoor products.
- Primary
- Secondary
- Accent
- Background
- Text
Luxury
Charcoal, champagne, and rose gold for premium branding.
- Primary
- Secondary
- Accent
- Background
- Text
Minimal
Neutral surfaces with a single sharp accent for clean product UI.
- Primary
- Secondary
- Accent
- Background
- Text
Corporate
Trust-building navy and steel for B2B and finance sites.
- Primary
- Secondary
- Accent
- Background
- Text
Modern
Violet accents on cool neutrals for modern product marketing.
- Primary
- Secondary
- Accent
- Background
- Text
Pastel Soft
Gentle pastel set for kids, wellness, and soft branding.
- Primary
- Secondary
- Accent
- Background
- Text
Dark Mode
Accessible dark surfaces with luminous accents.
- Primary
- Secondary
- Accent
- Background
- Text
E-commerce
Conversion-friendly CTA colors on clean product pages.
- Primary
- Secondary
- Accent
- Background
- Text
Social Media
Bold social-friendly hues for thumbnails and brand kits.
- Primary
- Secondary
- Accent
- Background
- Text
Website
Balanced web palette for marketing landing pages.
- Primary
- Secondary
- Accent
- Background
- Text
Color categories
Browse by family and style — red, blue, pastel, neon, earthy, and more.
Red Colors
Browse red color codes with HEX, RGB, and HSL. From crimson and burgundy to soft pastel pink-reds fo…
Explore →Blue ColorsExplore blue color codes including navy, sky blue, royal blue, and UI primary blues with HEX, RGB, H…
Explore →Green ColorsFind green HEX codes for nature brands, success UI states, mint pastels, and forest tones — with RGB…
Explore →Pastel ColorsSoft pastel color codes for branding, kids products, and gentle UI. Copy HEX, RGB, and ready pastel …
Explore →Neon ColorsBright neon HEX codes for logos, nightlife branding, esports, and high-energy social creatives.…
Explore →Warm ColorsWarm color codes across reds, oranges, golds, and earth tones for inviting brand systems.…
Explore →Cool ColorsCool blues, greens, cyans, and purples for calm, trustworthy digital products.…
Explore →Earthy ColorsEarth-tone HEX codes for interiors, craft brands, organic products, and natural palettes.…
Explore →Color tools
Picker, converter, palette, contrast, mixer, gradients, and image extract.
Color Picker
Pick hue, saturation, brightness — live HEX / RGB / HSL.
Open →Color ConverterConvert HEX, RGB, HSL, HSV, and CMYK in real time.
Open →Palette GeneratorBuild 3–6 color palettes from any base color.
Open →Image Color ExtractorUpload an image, extract dominant colors, click to pick pixels.
Open →Contrast CheckerWCAG AA / AAA contrast ratios for text and UI.
Open →CSS Gradient GeneratorLinear and radial gradients with one-click CSS copy.
Open →Color MixerBlend two colors with adjustable mix ratios.
Open →Random ColorGenerate random colors and matching schemes.
Open →Color guides
HEX vs RGB, palettes, contrast, pastels, neons, and brand color systems.
Complete Color Code Guide
Learn how HEX, RGB, RGBA, HSL, HSV, and CMYK color codes work, when to use each format, and how to copy codes …
Read →How HEX Colors WorkA plain-language explanation of hexadecimal color codes, channels, and CSS usage with examples from the color …
Read →HEX vs RGB vs CMYKCompare HEX, RGB, and CMYK — when each format wins for web, UI, and print workflows.…
Read →How to Choose Website ColorsA practical process for picking primary, secondary, accent, background, and text colors for websites and apps.…
Read →Best Color CombinationsComplementary, analogous, triadic, and split-complementary combinations with links to live examples.…
Read →Color Psychology GuideHow red, blue, green, and other families commonly feel in branding — without overclaiming universal meanings.…
Read →How to use KDF Color Tools
Search a color name (royal blue, pastel pink), paste a HEX or RGB value, or use the hue / saturation / brightness sliders. Copy HEX, RGB, HSL, HSLA, HSV, and CMYK. Generate complementary and triadic harmonies, build primary–accent palettes, and verify WCAG contrast before shipping UI.
What is a HEX color code?
HEX codes like #4169E1 represent red, green, and blue channels in hexadecimal — the standard format for CSS and design tools. See Royal Blue for a full example page.