CSS Colors for Websites: 8 Beautiful Color Schemes You Can Copy for Your Brand Design

🕒

Table of Contents

• Introduction
• CSS Color Names (A–H)
• CSS Color Names (I–Z)
• Color Formats & Accessibility
• Scheme 1 – Tech & Modern (Fresh Green)
• Scheme 2 – Luxury & Calm (Deep Navy + Gold)
• Scheme 3 – Bright & Energetic (Coral + Indigo)
• Scheme 4 – Minimal & Editorial (Charcoal + Ivory)
• Scheme 5 – Natural & Organic (Forest + Sand)
• Scheme 6 – Creative & Pastel (Lilac + Sky)
• Scheme 7 – Dark Mode Pro (Slate + Mint)
• Scheme 8 – Bold Commerce (Crimson + Jet)
• Final Thoughts
• FAQs

Introduction

Color is the soul of every website. Whether you’re building your first blog, redesigning your portfolio, or creating a landing page for your brand, the color palette sets the emotion and defines trust. A balanced use of CSS colors — from headers to buttons — helps readers stay longer and improves conversion.

In this guide, you’ll find the full CSS color list (by name, HEX, RGB, HSL) and 8 professional website color schemes that you can copy directly for your project. Each palette shows the exact colors for the header, text, card, button, and footer.

We’ll also cover how color formats work (HEX, RGB, HSL), why accessibility matters, and how to choose harmonious tones that look beautiful across all devices.

Explore this: HTML Tags for Beginners: Structure, Examples & SEO Guide

CSS Color Names (A–H)

Below is a quick reference for all CSS named colors from A to H with their HEX, RGB, and HSL values. You can use these names directly in your stylesheets without needing the code version.

Swatch	Name	HEX	RGB	HSL
	aliceblue	#F0F8FF	rgb(240,248,255)	hsl(208,100%,97%)
	antiquewhite	#FAEBD7	rgb(250,235,215)	hsl(34,78%,91%)
	aqua	#00FFFF	rgb(0,255,255)	hsl(180,100%,50%)
	aquamarine	#7FFFD4	rgb(127,255,212)	hsl(160,100%,75%)
	azure	#F0FFFF	rgb(240,255,255)	hsl(180,100%,97%)
	beige	#F5F5DC	rgb(245,245,220)	hsl(60,56%,91%)
	bisque	#FFE4C4	rgb(255,228,196)	hsl(33,100%,88%)
	black	#000000	rgb(0,0,0)	hsl(0,0%,0%)
	blanchedalmond	#FFEBCD	rgb(255,235,205)	hsl(36,100%,90%)
	blue	#0000FF	rgb(0,0,255)	hsl(240,100%,50%)
	blueviolet	#8A2BE2	rgb(138,43,226)	hsl(271,76%,53%)
	brown	#A52A2A	rgb(165,42,42)	hsl(0,59%,41%)
	burlywood	#DEB887	rgb(222,184,135)	hsl(34,57%,70%)
	cadetblue	#5F9EA0	rgb(95,158,160)	hsl(182,25%,50%)
	chartreuse	#7FFF00	rgb(127,255,0)	hsl(90,100%,50%)
	chocolate	#D2691E	rgb(210,105,30)	hsl(25,75%,47%)
	coral	#FF7F50	rgb(255,127,80)	hsl(16,100%,66%)
	cornflowerblue	#6495ED	rgb(100,149,237)	hsl(219,79%,66%)
	cornsilk	#FFF8DC	rgb(255,248,220)	hsl(48,100%,93%)
	crimson	#DC143C	rgb(220,20,60)	hsl(348,83%,47%)
	cyan	#00FFFF	rgb(0,255,255)	hsl(180,100%,50%)
	darkblue	#00008B	rgb(0,0,139)	hsl(240,100%,27%)
	darkcyan	#008B8B	rgb(0,139,139)	hsl(180,100%,27%)
	darkgoldenrod	#B8860B	rgb(184,134,11)	hsl(43,89%,38%)
	darkgray	#A9A9A9	rgb(169,169,169)	hsl(0,0%,66%)
	darkgreen	#006400	rgb(0,100,0)	hsl(120,100%,20%)
	darkkhaki	#BDB76B	rgb(189,183,107)	hsl(56,38%,58%)
	darkmagenta	#8B008B	rgb(139,0,139)	hsl(300,100%,27%)
	darkolivegreen	#556B2F	rgb(85,107,47)	hsl(82,39%,30%)
	darkorange	#FF8C00	rgb(255,140,0)	hsl(33,100%,50%)
	darkorchid	#9932CC	rgb(153,50,204)	hsl(280,61%,50%)

Swatch	Name	HEX	RGB	HSL
	darkred	#8B0000	rgb(139,0,0)	hsl(0,100%,27%)
	darksalmon	#E9967A	rgb(233,150,122)	hsl(15,72%,70%)
	darkseagreen	#8FBC8F	rgb(143,188,143)	hsl(120,25%,65%)
	darkslateblue	#483D8B	rgb(72,61,139)	hsl(248,39%,39%)
	darkslategray	#2F4F4F	rgb(47,79,79)	hsl(180,25%,25%)
	darkslategrey	#2F4F4F	rgb(47,79,79)	hsl(180,25%,25%)
	darkturquoise	#00CED1	rgb(0,206,209)	hsl(181,100%,41%)
	darkviolet	#9400D3	rgb(148,0,211)	hsl(282,100%,41%)
	deeppink	#FF1493	rgb(255,20,147)	hsl(328,100%,54%)
	deepskyblue	#00BFFF	rgb(0,191,255)	hsl(195,100%,50%)
	dimgray	#696969	rgb(105,105,105)	hsl(0,0%,41%)
	dimgrey	#696969	rgb(105,105,105)	hsl(0,0%,41%)
	dodgerblue	#1E90FF	rgb(30,144,255)	hsl(210,100%,56%)
	firebrick	#B22222	rgb(178,34,34)	hsl(0,68%,42%)
	floralwhite	#FFFAF0	rgb(255,250,240)	hsl(40,100%,97%)
	forestgreen	#228B22	rgb(34,139,34)	hsl(120,61%,34%)
	fuchsia	#FF00FF	rgb(255,0,255)	hsl(300,100%,50%)
	gainsboro	#DCDCDC	rgb(220,220,220)	hsl(0,0%,86%)
	ghostwhite	#F8F8FF	rgb(248,248,255)	hsl(240,100%,99%)
	gold	#FFD700	rgb(255,215,0)	hsl(51,100%,50%)
	goldenrod	#DAA520	rgb(218,165,32)	hsl(43,74%,49%)
	gray	#808080	rgb(128,128,128)	hsl(0,0%,50%)
	green	#008000	rgb(0,128,0)	hsl(120,100%,25%)
	greenyellow	#ADFF2F	rgb(173,255,47)	hsl(84,100%,59%)
	grey	#808080	rgb(128,128,128)	hsl(0,0%,50%)
	honeydew	#F0FFF0	rgb(240,255,240)	hsl(120,100%,97%)
	hotpink	#FF69B4	rgb(255,105,180)	hsl(330,100%,71%)

CSS Color Names (I–Z)

Swatch	Name	HEX	RGB	HSL
	indianred	#CD5C5C	rgb(205,92,92)	hsl(0,53%,58%)
	indigo	#4B0082	rgb(75,0,130)	hsl(275,100%,25%)
	ivory	#FFFFF0	rgb(255,255,240)	hsl(60,100%,97%)
	khaki	#F0E68C	rgb(240,230,140)	hsl(54,77%,75%)
	lavender	#E6E6FA	rgb(230,230,250)	hsl(240,67%,94%)
	lavenderblush	#FFF0F5	rgb(255,240,245)	hsl(340,100%,97%)
	lawngreen	#7CFC00	rgb(124,252,0)	hsl(90,100%,49%)
	lemonchiffon	#FFFACD	rgb(255,250,205)	hsl(54,100%,90%)
	lightblue	#ADD8E6	rgb(173,216,230)	hsl(195,53%,79%)
	lightcoral	#F08080	rgb(240,128,128)	hsl(0,79%,72%)
	lightcyan	#E0FFFF	rgb(224,255,255)	hsl(180,100%,94%)
	lightgoldenrodyellow	#FAFAD2	rgb(250,250,210)	hsl(60,80%,90%)
	lightgray	#D3D3D3	rgb(211,211,211)	hsl(0,0%,83%)
	lightgreen	#90EE90	rgb(144,238,144)	hsl(120,73%,75%)
	lightgrey	#D3D3D3	rgb(211,211,211)	hsl(0,0%,83%)
	lightpink	#FFB6C1	rgb(255,182,193)	hsl(351,100%,85%)
	lightsalmon	#FFA07A	rgb(255,160,122)	hsl(17,100%,74%)
	lightseagreen	#20B2AA	rgb(32,178,170)	hsl(177,70%,41%)
	lightskyblue	#87CEFA	rgb(135,206,250)	hsl(203,92%,75%)
	lightslategray	#778899	rgb(119,136,153)	hsl(210,14%,53%)
	lightslategrey	#778899	rgb(119,136,153)	hsl(210,14%,53%)
	lightsteelblue	#B0C4DE	rgb(176,196,222)	hsl(214,41%,78%)
	lightyellow	#FFFFE0	rgb(255,255,224)	hsl(60,100%,94%)
	lime	#00FF00	rgb(0,255,0)	hsl(120,100%,50%)
	limegreen	#32CD32	rgb(50,205,50)	hsl(120,61%,50%)
	linen	#FAF0E6	rgb(250,240,230)	hsl(30,67%,94%)
	magenta	#FF00FF	rgb(255,0,255)	hsl(300,100%,50%)
	maroon	#800000	rgb(128,0,0)	hsl(0,100%,25%)
	mediumaquamarine	#66CDAA	rgb(102,205,170)	hsl(160,51%,60%)
	mediumblue	#0000CD	rgb(0,0,205)	hsl(240,100%,40%)
	mediumorchid	#BA55D3	rgb(186,85,211)	hsl(288,59%,58%)
	mediumpurple	#9370DB	rgb(147,112,219)	hsl(260,60%,65%)
	mediumseagreen	#3CB371	rgb(60,179,113)	hsl(147,50%,47%)
	mediumslateblue	#7B68EE	rgb(123,104,238)	hsl(249,80%,67%)
	mediumspringgreen	#00FA9A	rgb(0,250,154)	hsl(157,100%,49%)
	mediumturquoise	#48D1CC	rgb(72,209,204)	hsl(178,60%,55%)
	mediumvioletred	#C71585	rgb(199,21,133)	hsl(322,81%,43%)
	midnightblue	#191970	rgb(25,25,112)	hsl(240,64%,27%)
	mintcream	#F5FFFA	rgb(245,255,250)	hsl(150,100%,98%)
	mistyrose	#FFE4E1	rgb(255,228,225)	hsl(6,100%,94%)
	moccasin	#FFE4B5	rgb(255,228,181)	hsl(38,100%,85%)
	navajowhite	#FFDEAD	rgb(255,222,173)	hsl(36,100%,84%)
	navy	#000080	rgb(0,0,128)	hsl(240,100%,25%)
	oldlace	#FDF5E6	rgb(253,245,230)	hsl(39,85%,95%)
	olive	#808000	rgb(128,128,0)	hsl(60,100%,25%)
	olivedrab	#6B8E23	rgb(107,142,35)	hsl(80,60%,35%)
	orange	#FFA500	rgb(255,165,0)	hsl(39,100%,50%)
	orangered	#FF4500	rgb(255,69,0)	hsl(16,100%,50%)
	orchid	#DA70D6	rgb(218,112,214)	hsl(302,59%,65%)
	palegoldenrod	#EEE8AA	rgb(238,232,170)	hsl(55,67%,80%)
	palegreen	#98FB98	rgb(152,251,152)	hsl(120,93%,79%)
	paleturquoise	#AFEEEE	rgb(175,238,238)	hsl(180,65%,81%)
	palevioletred	#DB7093	rgb(219,112,147)	hsl(340,60%,65%)
	papayawhip	#FFEFD5	rgb(255,239,213)	hsl(37,100%,92%)
	peachpuff	#FFDAB9	rgb(255,218,185)	hsl(28,100%,86%)
	peru	#CD853F	rgb(205,133,63)	hsl(30,59%,53%)
	pink	#FFC0CB	rgb(255,192,203)	hsl(350,100%,88%)
	plum	#DDA0DD	rgb(221,160,221)	hsl(300,47%,75%)
	powderblue	#B0E0E6	rgb(176,224,230)	hsl(187,52%,80%)
	purple	#800080	rgb(128,0,128)	hsl(300,100%,25%)
	rebeccapurple	#663399	rgb(102,51,153)	hsl(270,50%,40%)
	red	#FF0000	rgb(255,0,0)	hsl(0,100%,50%)
	rosybrown	#BC8F8F	rgb(188,143,143)	hsl(0,25%,65%)
	royalblue	#4169E1	rgb(65,105,225)	hsl(225,73%,57%)
	saddlebrown	#8B4513	rgb(139,69,19)	hsl(25,76%,31%)
	salmon	#FA8072	rgb(250,128,114)	hsl(6,93%,71%)
	sandybrown	#F4A460	rgb(244,164,96)	hsl(28,87%,67%)
	seagreen	#2E8B57	rgb(46,139,87)	hsl(146,50%,36%)
	seashell	#FFF5EE	rgb(255,245,238)	hsl(25,100%,97%)
	sienna	#A0522D	rgb(160,82,45)	hsl(19,56%,40%)
	silver	#C0C0C0	rgb(192,192,192)	hsl(0,0%,75%)
	skyblue	#87CEEB	rgb(135,206,235)	hsl(197,71%,73%)
	slateblue	#6A5ACD	rgb(106,90,205)	hsl(248,53%,58%)
	slategray	#708090	rgb(112,128,144)	hsl(210,13%,50%)
	slategrey	#708090	rgb(112,128,144)	hsl(210,13%,50%)
	snow	#FFFAFA	rgb(255,250,250)	hsl(0,100%,99%)
	springgreen	#00FF7F	rgb(0,255,127)	hsl(150,100%,50%)
	steelblue	#4682B4	rgb(70,130,180)	hsl(207,44%,49%)
	tan	#D2B48C	rgb(210,180,140)	hsl(34,44%,69%)
	teal	#008080	rgb(0,128,128)	hsl(180,100%,25%)
	thistle	#D8BFD8	rgb(216,191,216)	hsl(300,24%,80%)
	tomato	#FF6347	rgb(255,99,71)	hsl(9,100%,64%)
	turquoise	#40E0D0	rgb(64,224,208)	hsl(174,72%,56%)
	violet	#EE82EE	rgb(238,130,238)	hsl(300,76%,72%)
	wheat	#F5DEB3	rgb(245,222,179)	hsl(39,77%,83%)
	white	#FFFFFF	rgb(255,255,255)	hsl(0,0%,100%)
	whitesmoke	#F5F5F5	rgb(245,245,245)	hsl(0,0%,96%)
	yellow	#FFFF00	rgb(255,255,0)	hsl(60,100%,50%)
	yellowgreen	#9ACD32	rgb(154,205,50)	hsl(80,61%,50%)

Color Formats & Accessibility

Every color you saw above can be written in three main CSS formats: HEX, RGB(A), and HSL(A). Understanding them will help you blend shades precisely and keep your design consistent.

1. HEX – Compact & Popular

The most common format uses a hash (#) followed by six digits representing red, green, and blue values. Example:

body { background: #06d6a0; color: #0f172a; }

HEX is perfect when you want short, clean code. Use #RRGGBB or shorthand #RGB when both digits repeat (e.g., #fff for white).

2. RGB / RGBA – For Transparency

RGB stands for red-green-blue and allows decimal values from 0 to 255. Adding an “A” channel controls transparency.

header { background: rgba(17,138,178,0.9); }

Use RGBA when you need overlays, shadows, or hover fades.

3. HSL / HSLA – For Designers

HSL stands for hue, saturation, lightness. It’s intuitive because it matches how humans perceive color: hue = the base color, saturation = intensity, lightness = brightness.

button { background: hsl(160,100%,35%); }

You can lighten or darken by adjusting the third value, making HSL ideal for theming systems and brand gradients.

4. Gradients & Blends

Combine two or more colors using linear-gradient() or radial-gradient() for hero backgrounds or buttons:

background: linear-gradient(120deg, #06d6a0, #118ab2);

5. Accessibility & Contrast

Always check contrast between text and background using tools like WebAIM Contrast Checker. Aim for 4.5:1 minimum for normal text and 3:1 for large headings. When colors fail contrast tests, darken text or lighten backgrounds slightly via HSL.

High contrast improves readability, trust, and SEO dwell time. Modern brands like Google, Apple, and Stripe use neutral surfaces (#ffffff or #f8fafc) with vibrant accents (#1a73e8 or #06d6a0) for this reason.

How to Apply These Palettes

Now that you know every color name and format, let’s put them to work. Below you’ll find eight ready-made color schemes crafted for different website moods — tech startups, blogs, luxury stores, creative portfolios, and more.

Each scheme includes colors for:

• Header & navigation
• Body background & text
• Cards & sections
• Links & buttons (with hover states)
• Footer & borders

Simply copy the HEX or HSL values and paste them into your CSS. You can also mix neutrals from one palette with accents from another to match your brand personality.

Let’s explore them one by one ⬇️ starting from Scheme 1 – Tech & Modern (Fresh Green).

Scheme 1 – Tech & Modern (Fresh Green)

• Primary: #06d6a0
• Secondary: #118ab2
• Background: #ffffff
• Surface/Card: #f7fafc
• Text: #0f172a
• Muted: #475569
• Link: #118ab2
• Button: #06d6a0; Hover: #05c898
• Border: #e2e8f0

header { background:#ffffff; color:#0f172a; border-bottom:1px solid #e2e8f0; }
nav a { color:#118ab2; }
body { background:#ffffff; color:#0f172a; }
.card { background:#f7fafc; border:1px solid #e2e8f0; }
a { color:#118ab2; }
.btn-primary { background:#06d6a0; color:#ffffff; }
.btn-primary:hover { background:#05c898; }
footer { background:#0f172a; color:#e2e8f0; }

Scheme 2 – Luxury & Calm (Deep Navy + Gold)

• Primary: #0b132b
• Secondary: #f8c537
• Background: #0b132b
• Surface/Card: #1c2541
• Text: #e2e8f0
• Muted: #94a3b8
• Link: #f8c537
• Button: #f8c537; Hover: #e1af1f
• Border: #2d3a58

header, body { background:#0b132b; color:#e2e8f0; }
.card { background:#1c2541; border:1px solid #2d3a58; }
a { color:#f8c537; }
.btn-primary { background:#f8c537; color:#0b132b; }
footer { background:#0b132b; color:#94a3b8; }

Scheme 3 – Bright & Energetic (Coral + Indigo)

• Primary: #ff6b6b
• Secondary: #4c51bf
• Background: #ffffff
• Surface/Card: #fdf2f2
• Text: #1f2937
• Muted: #6b7280
• Link: #4c51bf
• Button: #ff6b6b; Hover: #ff5252
• Border: #f3f4f6

header { background:#ffffff; color:#1f2937; }
.card { background:#fdf2f2; border:1px solid #f3f4f6; }
a { color:#4c51bf; }
.btn-primary { background:#ff6b6b; color:#ffffff; }
footer { background:#1f2937; color:#e5e7eb; }

Scheme 4 – Minimal & Editorial (Charcoal + Ivory)

• Primary: #111827
• Secondary: #8b5cf6
• Background: #fafafa
• Surface/Card: #ffffff
• Text: #111827
• Muted: #4b5563
• Link: #8b5cf6
• Button: #111827; Hover: #0f1623
• Border: #e5e7eb

header { background:#fafafa; color:#111827; border-bottom:1px solid #e5e7eb; }
.card { background:#ffffff; border:1px solid #e5e7eb; }
a { color:#8b5cf6; }
.btn-primary { background:#111827; color:#ffffff; }
footer { background:#111827; color:#e5e7eb; }

Scheme 5 – Natural & Organic (Forest + Sand)

• Primary: #2f855a
• Secondary: #d97706
• Background: #fefce8
• Surface/Card: #fffdf2
• Text: #1f2937
• Muted: #64748b
• Link: #2f855a
• Button: #2f855a; Hover: #276749
• Border: #f1f5f9

header { background:#fefce8; color:#1f2937; }
.card { background:#fffdf2; border:1px solid #f1f5f9; }
a { color:#2f855a; }
.btn-primary { background:#2f855a; color:#ffffff; }
footer { background:#1f2937; color:#e5e7eb; }

Scheme 6 – Creative & Pastel (Lilac + Sky)

• Primary: #a78bfa
• Secondary: #38bdf8
• Background: #f8fafc
• Surface/Card: #ffffff
• Text: #0f172a
• Muted: #64748b
• Link: #38bdf8
• Button: #a78bfa; Hover: #946cf7
• Border: #e2e8f0

header { background:#f8fafc; color:#0f172a; border-bottom:1px solid #e2e8f0; }
.card { background:#ffffff; border:1px solid #e2e8f0; }
a { color:#38bdf8; }
.btn-primary { background:#a78bfa; color:#0f172a; }
footer { background:#0f172a; color:#e5e7eb; }

Scheme 7 – Dark Mode Pro (Slate + Mint)

• Primary: #0b1020
• Secondary: #10b981
• Background: #0b1020
• Surface/Card: #111827
• Text: #e5e7eb
• Muted: #9ca3af
• Link: #10b981
• Button: #10b981; Hover: #0ea371
• Border: #1f2937

header { background:#0b1020; color:#e5e7eb; }
body  { background:#0b1020; color:#e5e7eb; }
.card { background:#111827; border:1px solid #1f2937; }
a { color:#10b981; }
.btn-primary { background:#10b981; color:#0b1020; }
footer { background:#0b1020; color:#9ca3af; }

Scheme 8 – Bold Commerce (Crimson + Jet)

• Primary: #d90429
• Secondary: #222222
• Background: #ffffff
• Surface/Card: #f8fafc
• Text: #111827
• Muted: #6b7280
• Link: #d90429
• Button: #d90429; Hover: #b70324
• Border: #e5e7eb

header { background:#ffffff; color:#111827; border-bottom:1px solid #e5e7eb; }
.card { background:#f8fafc; border:1px solid #e5e7eb; }
a { color:#d90429; }
.btn-primary { background:#d90429; color:#ffffff; }
footer { background:#222222; color:#e5e7eb; }

Final Thoughts

With the full CSS color list and eight brand-ready palettes, you can style a complete interface — from headers and cards to buttons and footers — in minutes. Choose one palette that matches your brand voice, verify AA contrast, and keep links and actions vivid. Start simple, stay consistent, and iterate with HSL to fine-tune shades. Bookmark this page and come back whenever you need a palette that just works.

If this guide helped, add it to your favorites for quick access and share it so others can build beautiful sites faster.

FAQs

Which color format is best: HEX, RGB, or HSL?

For editing shades/tints quickly, use HSL. For compact code, use HEX. For animation/canvas work, RGB(A) is convenient.

How do I ensure my text is readable?

Target WCAG AA contrast (4.5:1 body, 3:1 large headings). If a button looks dull on mobile, increase contrast or change the hover.

Can I mix two palettes?

Yes — keep one primary and one secondary. Borrow neutrals (bg, surface, text, border) from another palette if needed.

What about gradients?

Use subtle angles (120–150deg) and close hues. Avoid harsh rainbow gradients behind text unless contrast is guaranteed.

How many colors should a brand use?

One primary, one secondary, and 3–4 neutrals is a reliable system. Too many colors reduce recognition.

Do these palettes support dark mode?

Yes. Start from Scheme 7 or invert light palettes by switching backgrounds to slate/dark and lifting text to #e5e7eb.

Where do I set these colors in Blogger?

Add the CSS in your theme’s custom CSS area. Then apply classes to header, nav, body, cards, links, buttons, and footer as shown.