[{"data":1,"prerenderedAt":809},["ShallowReactive",2],{"guide-design-color-fundamentals":3},{"id":4,"title":5,"body":6,"date":800,"description":801,"extension":802,"meta":803,"navigation":804,"path":805,"readingTime":517,"seo":806,"stem":807,"__hash__":808},"guides\u002Fguides\u002Fdesign-color-fundamentals.md","Design Color Fundamentals",{"type":7,"value":8,"toc":766},"minimark",[9,14,18,21,25,28,33,36,59,63,66,86,90,93,96,100,103,107,110,130,134,137,154,158,161,178,182,185,210,214,217,229,233,236,285,289,309,312,316,319,361,365,392,396,399,408,412,415,419,422,448,452,455,521,525,528,563,567,570,587,590,594,597,622,625,629,632,651,655,695,699,719,723,726,742,746,762],[10,11,13],"h2",{"id":12},"why-color-theory-matters","Why Color Theory Matters",[15,16,17],"p",{},"Color is the first thing users notice. It sets mood, directs attention, and communicates meaning—often before a single word is read. Without a grounding in color theory, picking colors becomes guesswork. With it, you build palettes that look intentional, feel harmonious, and meet accessibility standards.",[15,19,20],{},"This guide covers the core concepts every web designer needs: the color wheel, harmony types, temperature, contrast, and a repeatable process for building brand palettes.",[10,22,24],{"id":23},"the-color-wheel-basics","The Color Wheel Basics",[15,26,27],{},"The color wheel arranges hues in a circle so relationships between them are easy to see. It dates back to Newton's prism experiments and remains the foundation of color selection.",[29,30,32],"h3",{"id":31},"primary-colors-digital","Primary Colors (Digital)",[15,34,35],{},"Screens use additive color mixing—light adds together to create brighter colors:",[37,38,39,47,53],"ul",{},[40,41,42,46],"li",{},[43,44,45],"strong",{},"Red"," (#FF0000)",[40,48,49,52],{},[43,50,51],{},"Green"," (#00FF00)",[40,54,55,58],{},[43,56,57],{},"Blue"," (#0000FF)",[29,60,62],{"id":61},"secondary-colors","Secondary Colors",[15,64,65],{},"Mixing two primaries in equal parts produces secondary colors:",[37,67,68,74,80],{},[40,69,70,73],{},[43,71,72],{},"Yellow"," = Red + Green",[40,75,76,79],{},[43,77,78],{},"Cyan"," = Green + Blue",[40,81,82,85],{},[43,83,84],{},"Magenta"," = Blue + Red",[29,87,89],{"id":88},"tertiary-colors","Tertiary Colors",[15,91,92],{},"Mixing a primary with an adjacent secondary produces six tertiary colors: red-orange, yellow-orange, yellow-green, blue-green, blue-violet, red-violet.",[15,94,95],{},"The wheel thus has 12 evenly spaced hues, each 30° apart. Every color-harmony rule is built on the geometric relationships between positions on this wheel.",[10,97,99],{"id":98},"color-harmony-types","Color Harmony Types",[15,101,102],{},"Harmony rules identify color combinations that look balanced. They work because the colors share a mathematical relationship on the wheel.",[29,104,106],{"id":105},"complementary","Complementary",[15,108,109],{},"Two colors opposite each other (180° apart). High contrast and vibrant.",[37,111,112,118,124],{},[40,113,114,117],{},[43,115,116],{},"Example:"," Blue (#0000FF) ↔ Yellow (#FFFF00)",[40,119,120,123],{},[43,121,122],{},"Best for:"," Call-to-action buttons that must stand out",[40,125,126,129],{},[43,127,128],{},"Tip:"," Use one color at full saturation and the other at reduced saturation to avoid visual vibrating",[29,131,133],{"id":132},"analogous","Analogous",[15,135,136],{},"Three adjacent colors (within 60° of each other). Low contrast, serene feel.",[37,138,139,144,149],{},[40,140,141,143],{},[43,142,116],{}," Blue, Blue-Green, Green",[40,145,146,148],{},[43,147,122],{}," Backgrounds, gradients, calm layouts",[40,150,151,153],{},[43,152,128],{}," Pick one dominant hue, one supporting, one accent—don't give equal weight",[29,155,157],{"id":156},"triadic","Triadic",[15,159,160],{},"Three colors equally spaced (120° apart). Strong contrast with balanced vibe.",[37,162,163,168,173],{},[40,164,165,167],{},[43,166,116],{}," Red, Yellow, Blue (primary triad)",[40,169,170,172],{},[43,171,122],{}," Diverse content sections, playful brands",[40,174,175,177],{},[43,176,128],{}," Let one color dominate; use the other two sparingly",[29,179,181],{"id":180},"monochromatic","Monochromatic",[15,183,184],{},"One hue with varying saturation and lightness. Cohesive and elegant.",[37,186,187,200,205],{},[40,188,189,191,192,196,197],{},[43,190,116],{}," ",[193,194,195],"code",{},"hsl(200, 80%, 20%)"," through ",[193,198,199],{},"hsl(200, 80%, 90%)",[40,201,202,204],{},[43,203,122],{}," Minimalist designs, single-product pages",[40,206,207,209],{},[43,208,128],{}," Add one contrasting accent color for interactive elements",[29,211,213],{"id":212},"split-complementary","Split-Complementary",[15,215,216],{},"One base color plus the two colors adjacent to its complement. High contrast like complementary but softer.",[37,218,219,224],{},[40,220,221,223],{},[43,222,116],{}," Blue base → complement is Orange → split into Red-Orange and Yellow-Orange",[40,225,226,228],{},[43,227,122],{}," Beginners who want contrast without tension",[10,230,232],{"id":231},"warm-vs-cool-colors","Warm vs Cool Colors",[15,234,235],{},"Colors on the wheel carry temperature associations that affect how users feel.",[237,238,239,255],"table",{},[240,241,242],"thead",{},[243,244,245,249,252],"tr",{},[246,247,248],"th",{},"Temperature",[246,250,251],{},"Hues",[246,253,254],{},"Effect",[256,257,258,272],"tbody",{},[243,259,260,266,269],{},[261,262,263],"td",{},[43,264,265],{},"Warm",[261,267,268],{},"Red, Orange, Yellow",[261,270,271],{},"Energy, urgency, friendliness",[243,273,274,279,282],{},[261,275,276],{},[43,277,278],{},"Cool",[261,280,281],{},"Blue, Green, Purple",[261,283,284],{},"Calm, trust, professionalism",[29,286,288],{"id":287},"how-to-use-temperature","How to Use Temperature",[37,290,291,297,303],{},[40,292,293,296],{},[43,294,295],{},"Warm colors advance"," visually—they feel closer. Use them for buttons and highlights.",[40,298,299,302],{},[43,300,301],{},"Cool colors recede","—they feel farther away. Use them for backgrounds and large surfaces.",[40,304,305,308],{},[43,306,307],{},"Mix strategically",": a warm accent on a cool background draws the eye naturally.",[15,310,311],{},"Most corporate and SaaS websites lean cool (blue, gray) for trust, then add warm accents (orange CTA button) for action.",[10,313,315],{"id":314},"contrast-and-accessibility","Contrast and Accessibility",[15,317,318],{},"Color contrast is a hard requirement, not a nice-to-have. WCAG 2.1 defines two compliance levels:",[237,320,321,334],{},[240,322,323],{},[243,324,325,328,331],{},[246,326,327],{},"Level",[246,329,330],{},"Normal Text",[246,332,333],{},"Large Text",[256,335,336,349],{},[243,337,338,343,346],{},[261,339,340],{},[43,341,342],{},"AA",[261,344,345],{},"4.5:1",[261,347,348],{},"3:1",[243,350,351,356,359],{},[261,352,353],{},[43,354,355],{},"AAA",[261,357,358],{},"7:1",[261,360,345],{},[29,362,364],{"id":363},"practical-contrast-rules","Practical Contrast Rules",[366,367,368,374,380,386],"ol",{},[40,369,370,373],{},[43,371,372],{},"Never use light gray text on white."," The most common accessibility failure on the web.",[40,375,376,379],{},[43,377,378],{},"Test both light and dark modes."," A palette that works on white often fails on dark backgrounds.",[40,381,382,385],{},[43,383,384],{},"Check interactive states."," Hover, focus, and disabled states need adequate contrast too.",[40,387,388,391],{},[43,389,390],{},"Don't rely on color alone for meaning."," Use icons, text, or patterns alongside color cues.",[29,393,395],{"id":394},"quick-test-method","Quick Test Method",[15,397,398],{},"Squint at your design. If two adjacent elements merge, there isn't enough contrast. For precise numbers, use a contrast-checking tool.",[15,400,401,402,407],{},"For a deeper dive into WCAG contrast rules with real examples, see our ",[403,404,406],"a",{"href":405},"\u002Fguides\u002Fwcag-contrast-practical","WCAG Contrast Practical Guide",".",[10,409,411],{"id":410},"building-a-color-palette-for-your-brand","Building a Color Palette for Your Brand",[15,413,414],{},"Follow this five-step process to create a palette that is cohesive, flexible, and accessible.",[29,416,418],{"id":417},"step-1-choose-a-primary-hue","Step 1: Choose a Primary Hue",[15,420,421],{},"Pick the hue that represents your brand.",[37,423,424,430,436,442],{},[40,425,426,429],{},[43,427,428],{},"Tech \u002F SaaS"," → Blue (210°–230°)",[40,431,432,435],{},[43,433,434],{},"Health \u002F Eco"," → Green (140°–160°)",[40,437,438,441],{},[43,439,440],{},"Creative \u002F Bold"," → Red-Orange (10°–30°)",[40,443,444,447],{},[43,445,446],{},"Luxury \u002F Premium"," → Deep Purple (270°–290°)",[29,449,451],{"id":450},"step-2-generate-a-lightness-scale","Step 2: Generate a Lightness Scale",[15,453,454],{},"Create 7–9 variants by adjusting lightness while hue and saturation stay constant:",[456,457,462],"pre",{"className":458,"code":459,"language":460,"meta":461,"style":461},"language-css shiki shiki-themes github-light github-dark","--primary-50:  hsl(215, 80%, 95%);\n--primary-100: hsl(215, 80%, 88%);\n--primary-200: hsl(215, 80%, 76%);\n--primary-300: hsl(215, 80%, 64%);\n--primary-400: hsl(215, 80%, 52%);\n--primary-500: hsl(215, 80%, 42%);\n--primary-600: hsl(215, 80%, 34%);\n--primary-700: hsl(215, 80%, 26%);\n--primary-800: hsl(215, 80%, 18%);\n","css","",[193,463,464,473,479,485,491,497,503,509,515],{"__ignoreMap":461},[465,466,469],"span",{"class":467,"line":468},"line",1,[465,470,472],{"class":471},"sVt8B","--primary-50:  hsl(215, 80%, 95%);\n",[465,474,476],{"class":467,"line":475},2,[465,477,478],{"class":471},"--primary-100: hsl(215, 80%, 88%);\n",[465,480,482],{"class":467,"line":481},3,[465,483,484],{"class":471},"--primary-200: hsl(215, 80%, 76%);\n",[465,486,488],{"class":467,"line":487},4,[465,489,490],{"class":471},"--primary-300: hsl(215, 80%, 64%);\n",[465,492,494],{"class":467,"line":493},5,[465,495,496],{"class":471},"--primary-400: hsl(215, 80%, 52%);\n",[465,498,500],{"class":467,"line":499},6,[465,501,502],{"class":471},"--primary-500: hsl(215, 80%, 42%);\n",[465,504,506],{"class":467,"line":505},7,[465,507,508],{"class":471},"--primary-600: hsl(215, 80%, 34%);\n",[465,510,512],{"class":467,"line":511},8,[465,513,514],{"class":471},"--primary-700: hsl(215, 80%, 26%);\n",[465,516,518],{"class":467,"line":517},9,[465,519,520],{"class":471},"--primary-800: hsl(215, 80%, 18%);\n",[29,522,524],{"id":523},"step-3-add-a-neutral-scale","Step 3: Add a Neutral Scale",[15,526,527],{},"Choose a slightly tinted gray instead of pure gray for warmth:",[456,529,531],{"className":458,"code":530,"language":460,"meta":461,"style":461},"--gray-50:  hsl(215, 10%, 97%);\n--gray-100: hsl(215, 10%, 93%);\n--gray-200: hsl(215, 10%, 85%);\n--gray-500: hsl(215, 10%, 45%);\n--gray-800: hsl(215, 10%, 15%);\n--gray-900: hsl(215, 10%, 10%);\n",[193,532,533,538,543,548,553,558],{"__ignoreMap":461},[465,534,535],{"class":467,"line":468},[465,536,537],{"class":471},"--gray-50:  hsl(215, 10%, 97%);\n",[465,539,540],{"class":467,"line":475},[465,541,542],{"class":471},"--gray-100: hsl(215, 10%, 93%);\n",[465,544,545],{"class":467,"line":481},[465,546,547],{"class":471},"--gray-200: hsl(215, 10%, 85%);\n",[465,549,550],{"class":467,"line":487},[465,551,552],{"class":471},"--gray-500: hsl(215, 10%, 45%);\n",[465,554,555],{"class":467,"line":493},[465,556,557],{"class":471},"--gray-800: hsl(215, 10%, 15%);\n",[465,559,560],{"class":467,"line":499},[465,561,562],{"class":471},"--gray-900: hsl(215, 10%, 10%);\n",[29,564,566],{"id":565},"step-4-pick-an-accent","Step 4: Pick an Accent",[15,568,569],{},"Use a harmony rule to find your accent:",[37,571,572,577,582],{},[40,573,574,576],{},[43,575,106],{}," for maximum contrast",[40,578,579,581],{},[43,580,133],{}," for subtle distinction",[40,583,584,586],{},[43,585,157],{}," for visual variety",[15,588,589],{},"Define the accent at one or two lightness levels—not a full scale.",[29,591,593],{"id":592},"step-5-define-semantic-colors","Step 5: Define Semantic Colors",[15,595,596],{},"Reserve specific colors for status communication:",[456,598,600],{"className":458,"code":599,"language":460,"meta":461,"style":461},"--success: hsl(142, 70%, 40%);\n--warning: hsl(38, 90%, 50%);\n--error:   hsl(0, 80%, 55%);\n--info:    hsl(200, 85%, 50%);\n",[193,601,602,607,612,617],{"__ignoreMap":461},[465,603,604],{"class":467,"line":468},[465,605,606],{"class":471},"--success: hsl(142, 70%, 40%);\n",[465,608,609],{"class":467,"line":475},[465,610,611],{"class":471},"--warning: hsl(38, 90%, 50%);\n",[465,613,614],{"class":467,"line":481},[465,615,616],{"class":471},"--error:   hsl(0, 80%, 55%);\n",[465,618,619],{"class":467,"line":487},[465,620,621],{"class":471},"--info:    hsl(200, 85%, 50%);\n",[15,623,624],{},"Verify each semantic color against your background for WCAG compliance.",[29,626,628],{"id":627},"step-6-validate-in-both-modes","Step 6: Validate in Both Modes",[15,630,631],{},"Test every color pair in both light and dark themes. Dark mode typically requires:",[37,633,634,637,640],{},[40,635,636],{},"Lighter text colors",[40,638,639],{},"Desaturated accent colors (vivid colors feel harsher on dark backgrounds)",[40,641,642,643,646,647,650],{},"Slightly elevated surface colors (",[193,644,645],{},"hsl(215, 10%, 13%)"," instead of pure ",[193,648,649],{},"#000000",")",[10,652,654],{"id":653},"common-mistakes-to-avoid","Common Mistakes to Avoid",[37,656,657,663,669,683,689],{},[40,658,659,662],{},[43,660,661],{},"Too many hues",": Stick to one primary hue and one accent. More creates chaos.",[40,664,665,668],{},[43,666,667],{},"Ignoring cultural context",": Red signals danger in the West but luck in East Asia. Research your audience.",[40,670,671,674,675,678,679,682],{},[43,672,673],{},"Pure black on white",": The extreme contrast (21:1) causes eye strain. Use dark gray (",[193,676,677],{},"#1F2937",") on off-white (",[193,680,681],{},"#F9FAFB",") instead.",[40,684,685,688],{},[43,686,687],{},"Skipping accessibility checks",": What looks fine to you may be unreadable to someone with color vision deficiency.",[40,690,691,694],{},[43,692,693],{},"Inventing your own palette logic",": Use established harmony rules. They exist because they work.",[10,696,698],{"id":697},"key-takeaways","Key Takeaways",[37,700,701,704,707,710,713,716],{},[40,702,703],{},"The color wheel is the foundation—every harmony rule is geometry on this circle",[40,705,706],{},"Complementary = high contrast; analogous = low contrast; monochromatic = cohesive",[40,708,709],{},"Warm colors advance; cool colors recede—use this to guide attention",[40,711,712],{},"WCAG AA requires 4.5:1 contrast for body text—always verify",[40,714,715],{},"Build palettes with a primary scale, neutral scale, one accent, and semantic colors",[40,717,718],{},"Test in both light and dark modes before shipping",[10,720,722],{"id":721},"try-it-yourself","Try It Yourself",[15,724,725],{},"Explore and generate palettes with our free tools:",[37,727,728,735],{},[40,729,730,734],{},[403,731,733],{"href":732},"\u002Ftools\u002Fcolor-converter","Color Converter"," — pick a hue and get every format",[40,736,737,741],{},[403,738,740],{"href":739},"\u002Ftools\u002Fcolor-palette","Color Palette Generator"," — build harmonious palettes from a single color",[10,743,745],{"id":744},"related-guides","Related Guides",[37,747,748,755],{},[40,749,750,754],{},[403,751,753],{"href":752},"\u002Fguides\u002Fcolor-picker-guide","Color Picker Guide"," — choose colors visually and copy codes in any format",[40,756,757,761],{},[403,758,760],{"href":759},"\u002Fguides\u002Fcolor-code-formats","Color Code Formats"," — HEX, RGB, HSL, and CMYK explained in depth",[763,764,765],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":461,"searchDepth":475,"depth":475,"links":767},[768,769,774,781,784,788,796,797,798,799],{"id":12,"depth":475,"text":13},{"id":23,"depth":475,"text":24,"children":770},[771,772,773],{"id":31,"depth":481,"text":32},{"id":61,"depth":481,"text":62},{"id":88,"depth":481,"text":89},{"id":98,"depth":475,"text":99,"children":775},[776,777,778,779,780],{"id":105,"depth":481,"text":106},{"id":132,"depth":481,"text":133},{"id":156,"depth":481,"text":157},{"id":180,"depth":481,"text":181},{"id":212,"depth":481,"text":213},{"id":231,"depth":475,"text":232,"children":782},[783],{"id":287,"depth":481,"text":288},{"id":314,"depth":475,"text":315,"children":785},[786,787],{"id":363,"depth":481,"text":364},{"id":394,"depth":481,"text":395},{"id":410,"depth":475,"text":411,"children":789},[790,791,792,793,794,795],{"id":417,"depth":481,"text":418},{"id":450,"depth":481,"text":451},{"id":523,"depth":481,"text":524},{"id":565,"depth":481,"text":566},{"id":592,"depth":481,"text":593},{"id":627,"depth":481,"text":628},{"id":653,"depth":475,"text":654},{"id":697,"depth":475,"text":698},{"id":721,"depth":475,"text":722},{"id":744,"depth":475,"text":745},"2026-05-28","Color theory essentials for web designers — the color wheel, harmony types, contrast rules, and building effective palettes.","md",{"immutable":804},true,"\u002Fguides\u002Fdesign-color-fundamentals",{"title":5,"description":801},"guides\u002Fdesign-color-fundamentals","KK_r_MJwvh7UPamzeJGpTkYx8QIIvQGxBFjHrWCuoK0",1780401330867]