[{"data":1,"prerenderedAt":1804},["ShallowReactive",2],{"guide-color-theory-web-design":3},{"id":4,"title":5,"body":6,"date":1796,"description":1797,"extension":1798,"meta":1799,"navigation":418,"path":1800,"readingTime":1411,"seo":1801,"stem":1802,"__hash__":1803},"guides\u002Fguides\u002Fcolor-theory-web-design.md","Color Theory for Web Design — Complete Guide",{"type":7,"value":8,"toc":1753},"minimark",[9,14,18,21,25,28,33,36,59,62,66,69,89,93,96,101,105,108,112,115,120,131,136,147,151,154,158,166,170,181,185,188,192,200,204,215,219,222,227,238,242,245,250,270,274,285,289,292,296,352,356,359,454,458,475,479,482,583,589,593,596,600,603,617,621,624,632,636,639,653,752,756,759,770,774,777,831,835,838,842,869,873,953,957,975,1056,1060,1064,1067,1071,1074,1078,1081,1164,1168,1171,1175,1178,1182,1185,1729,1733,1736,1739,1743,1749],[10,11,13],"h2",{"id":12},"why-color-theory-matters-in-web-design","Why Color Theory Matters in Web Design",[15,16,17],"p",{},"Color is one of the most powerful tools in a web designer's arsenal. It influences user emotions, guides attention, establishes brand identity, and affects conversion rates. Yet many developers and designers choose colors based on personal preference rather than established color theory principles.",[15,19,20],{},"Understanding color theory helps you create purposeful, accessible, and visually harmonious websites. It transforms color selection from guesswork into a systematic process that serves both aesthetic and functional goals.",[10,22,24],{"id":23},"the-color-wheel-your-foundation","The Color Wheel: Your Foundation",[15,26,27],{},"The color wheel is a circular diagram that organizes colors based on their chromatic relationship. The modern color wheel is based on Sir Isaac Newton's 1704 discovery that white light splits into a spectrum of colors when passed through a prism.",[29,30,32],"h3",{"id":31},"primary-colors","Primary Colors",[15,34,35],{},"In digital design (using light, not pigment), the primary colors are:",[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)",[15,60,61],{},"All other colors on screens are created by mixing these three primary colors at different intensities.",[29,63,65],{"id":64},"secondary-colors","Secondary Colors",[15,67,68],{},"Secondary colors are created by mixing two primary colors in equal amounts:",[37,70,71,77,83],{},[40,72,73,76],{},[43,74,75],{},"Yellow"," = Red + Green (#FFFF00)",[40,78,79,82],{},[43,80,81],{},"Cyan"," = Green + Blue (#00FFFF)",[40,84,85,88],{},[43,86,87],{},"Magenta"," = Blue + Red (#FF00FF)",[29,90,92],{"id":91},"tertiary-colors","Tertiary Colors",[15,94,95],{},"Tertiary colors are created by mixing a primary color with an adjacent secondary color:",[37,97,98],{},[40,99,100],{},"Red-Orange, Yellow-Orange, Yellow-Green, Blue-Green, Blue-Violet, Red-Violet",[10,102,104],{"id":103},"color-harmony-creating-pleasing-combinations","Color Harmony: Creating Pleasing Combinations",[15,106,107],{},"Color harmony refers to aesthetically pleasing color combinations based on the color wheel. These formulas have been used by artists for centuries and apply equally to web design.",[29,109,111],{"id":110},"complementary-colors","Complementary Colors",[15,113,114],{},"Complementary colors sit opposite each other on the color wheel. They create high contrast and vibrant looks when used together.",[15,116,117],{},[43,118,119],{},"Examples:",[37,121,122,125,128],{},[40,123,124],{},"Red (#FF0000) and Cyan (#00FFFF)",[40,126,127],{},"Blue (#0000FF) and Yellow (#FFFF00)",[40,129,130],{},"Green (#00FF00) and Magenta (#FF00FF)",[15,132,133],{},[43,134,135],{},"Usage tips:",[37,137,138,141,144],{},[40,139,140],{},"Use one as the dominant color and the other as an accent",[40,142,143],{},"Avoid using full saturation for both colors simultaneously (can be jarring)",[40,145,146],{},"Perfect for call-to-action buttons that need to stand out",[29,148,150],{"id":149},"analogous-colors","Analogous Colors",[15,152,153],{},"Analogous colors are adjacent to each other on the color wheel (within 30-60 degrees). They create serene, comfortable designs with low contrast.",[15,155,156],{},[43,157,119],{},[37,159,160,163],{},[40,161,162],{},"Blue, Blue-Green, Green",[40,164,165],{},"Red, Red-Orange, Orange",[15,167,168],{},[43,169,135],{},[37,171,172,175,178],{},[40,173,174],{},"Choose one dominant color, one supporting color, and one accent",[40,176,177],{},"Great for backgrounds and subtle gradients",[40,179,180],{},"Less effective for highlighting important elements",[29,182,184],{"id":183},"triadic-colors","Triadic Colors",[15,186,187],{},"Triadic color schemes use three colors equally spaced around the color wheel (120 degrees apart). They offer strong visual contrast while maintaining harmony.",[15,189,190],{},[43,191,119],{},[37,193,194,197],{},[40,195,196],{},"Red, Yellow, Blue (primary triad)",[40,198,199],{},"Green, Orange, Purple (secondary triad)",[15,201,202],{},[43,203,135],{},[37,205,206,209,212],{},[40,207,208],{},"Let one color dominate and use the other two as accents",[40,210,211],{},"Works well for diverse content areas",[40,213,214],{},"Can be challenging to balance—test carefully",[29,216,218],{"id":217},"split-complementary-colors","Split-Complementary Colors",[15,220,221],{},"A variation of complementary colors: instead of using the direct opposite, use the two colors adjacent to the complement. This provides high contrast with less tension.",[15,223,224],{},[43,225,226],{},"Example:",[37,228,229,232,235],{},[40,230,231],{},"Base: Blue",[40,233,234],{},"Complement: Orange",[40,236,237],{},"Split: Yellow-Orange and Red-Orange",[29,239,241],{"id":240},"monochromatic-colors","Monochromatic Colors",[15,243,244],{},"Monochromatic schemes use different shades, tints, and tones of a single color. They're elegant, cohesive, and easy to implement.",[15,246,247],{},[43,248,249],{},"Creating variations:",[37,251,252,258,264],{},[40,253,254,257],{},[43,255,256],{},"Shade",": Add black (reduce lightness in HSL)",[40,259,260,263],{},[43,261,262],{},"Tint",": Add white (increase lightness in HSL)",[40,265,266,269],{},[43,267,268],{},"Tone",": Add gray (reduce saturation in HSL)",[15,271,272],{},[43,273,135],{},[37,275,276,279,282],{},[40,277,278],{},"Perfect for minimalist designs",[40,280,281],{},"Create depth with lightness variations",[40,283,284],{},"Add a single contrasting accent color for important elements",[10,286,288],{"id":287},"contrast-and-accessibility","Contrast and Accessibility",[15,290,291],{},"Color contrast is not just a design consideration—it's a legal requirement in many jurisdictions. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for text readability.",[29,293,295],{"id":294},"wcag-contrast-requirements","WCAG Contrast Requirements",[297,298,299,315],"table",{},[300,301,302],"thead",{},[303,304,305,309,312],"tr",{},[306,307,308],"th",{},"Level",[306,310,311],{},"Contrast Ratio",[306,313,314],{},"Use Case",[316,317,318,330,341],"tbody",{},[303,319,320,324,327],{},[321,322,323],"td",{},"AA (minimum)",[321,325,326],{},"4.5:1",[321,328,329],{},"Normal text (less than 18pt)",[303,331,332,335,338],{},[321,333,334],{},"AA (large text)",[321,336,337],{},"3:1",[321,339,340],{},"Large text (18pt+ or 14pt+ bold)",[303,342,343,346,349],{},[321,344,345],{},"AAA",[321,347,348],{},"7:1",[321,350,351],{},"Enhanced accessibility",[29,353,355],{"id":354},"testing-contrast","Testing Contrast",[15,357,358],{},"Always test your color combinations:",[360,361,366],"pre",{"className":362,"code":363,"language":364,"meta":365,"style":365},"language-css shiki shiki-themes github-light github-dark","\u002F* Good contrast example *\u002F\nbackground: #FFFFFF;  \u002F* White *\u002F\ncolor: #1A1A1A;      \u002F* Near-black *\u002F\n\u002F* Contrast ratio: 17.8:1 - Excellent *\u002F\n\n\u002F* Poor contrast example *\u002F\nbackground: #F0F0F0; \u002F* Light gray *\u002F\ncolor: #B0B0B0;      \u002F* Medium gray *\u002F\n\u002F* Contrast ratio: 2.1:1 - Fails WCAG *\u002F\n","css","",[367,368,369,378,392,407,413,420,426,437,448],"code",{"__ignoreMap":365},[370,371,374],"span",{"class":372,"line":373},"line",1,[370,375,377],{"class":376},"sJ8bj","\u002F* Good contrast example *\u002F\n",[370,379,381,385,389],{"class":372,"line":380},2,[370,382,384],{"class":383},"sVt8B","background: ",[370,386,388],{"class":387},"s7hpK","#FFFFFF;",[370,390,391],{"class":376},"  \u002F* White *\u002F\n",[370,393,395,398,401,404],{"class":372,"line":394},3,[370,396,397],{"class":383},"color: ",[370,399,400],{"class":387},"#1A1A1A",[370,402,403],{"class":383},";      ",[370,405,406],{"class":376},"\u002F* Near-black *\u002F\n",[370,408,410],{"class":372,"line":409},4,[370,411,412],{"class":376},"\u002F* Contrast ratio: 17.8:1 - Excellent *\u002F\n",[370,414,416],{"class":372,"line":415},5,[370,417,419],{"emptyLinePlaceholder":418},true,"\n",[370,421,423],{"class":372,"line":422},6,[370,424,425],{"class":376},"\u002F* Poor contrast example *\u002F\n",[370,427,429,431,434],{"class":372,"line":428},7,[370,430,384],{"class":383},[370,432,433],{"class":387},"#F0F0F0;",[370,435,436],{"class":376}," \u002F* Light gray *\u002F\n",[370,438,440,442,445],{"class":372,"line":439},8,[370,441,397],{"class":383},[370,443,444],{"class":387},"#B0B0B0;",[370,446,447],{"class":376},"      \u002F* Medium gray *\u002F\n",[370,449,451],{"class":372,"line":450},9,[370,452,453],{"class":376},"\u002F* Contrast ratio: 2.1:1 - Fails WCAG *\u002F\n",[29,455,457],{"id":456},"tools-for-checking-contrast","Tools for Checking Contrast",[37,459,460,463,466],{},[40,461,462],{},"Browser DevTools (many now include contrast checkers)",[40,464,465],{},"Online contrast checkers",[40,467,468,469,474],{},"Our ",[470,471,473],"a",{"href":472},"\u002Ftools\u002Fcolor-converter","Color Converter"," tool",[10,476,478],{"id":477},"color-psychology-in-web-design","Color Psychology in Web Design",[15,480,481],{},"Colors evoke emotions and associations. Understanding these can help you choose colors that align with your brand and message.",[297,483,484,497],{},[300,485,486],{},[303,487,488,491,494],{},[306,489,490],{},"Color",[306,492,493],{},"Common Associations",[306,495,496],{},"Best For",[316,498,499,509,519,529,539,550,561,572],{},[303,500,501,503,506],{},[321,502,45],{},[321,504,505],{},"Urgency, passion, danger, excitement",[321,507,508],{},"Sales, warnings, call-to-action buttons",[303,510,511,513,516],{},[321,512,57],{},[321,514,515],{},"Trust, professionalism, calm, stability",[321,517,518],{},"Corporate sites, finance, healthcare",[303,520,521,523,526],{},[321,522,51],{},[321,524,525],{},"Growth, health, money, nature",[321,527,528],{},"Environmental sites, finance, success states",[303,530,531,533,536],{},[321,532,75],{},[321,534,535],{},"Optimism, warmth, caution, energy",[321,537,538],{},"Highlights, warnings, cheerful brands",[303,540,541,544,547],{},[321,542,543],{},"Orange",[321,545,546],{},"Creativity, enthusiasm, affordability",[321,548,549],{},"Call-to-action, playful brands",[303,551,552,555,558],{},[321,553,554],{},"Purple",[321,556,557],{},"Luxury, wisdom, mystery, royalty",[321,559,560],{},"Premium products, creative agencies",[303,562,563,566,569],{},[321,564,565],{},"Black",[321,567,568],{},"Sophistication, luxury, power, mystery",[321,570,571],{},"Luxury brands, minimalist designs",[303,573,574,577,580],{},[321,575,576],{},"White",[321,578,579],{},"Purity, simplicity, cleanliness, space",[321,581,582],{},"Minimalist designs, medical sites",[15,584,585,588],{},[43,586,587],{},"Important",": Color associations vary by culture. Research your target audience's cultural context when designing for international users.",[10,590,592],{"id":591},"creating-a-color-palette-for-your-website","Creating a Color Palette for Your Website",[15,594,595],{},"Follow this systematic approach to build a cohesive color scheme:",[29,597,599],{"id":598},"step-1-choose-a-primary-color","Step 1: Choose a Primary Color",[15,601,602],{},"Select one color that represents your brand or the website's purpose. This will be used for:",[37,604,605,608,611,614],{},[40,606,607],{},"Primary buttons",[40,609,610],{},"Links",[40,612,613],{},"Key headings",[40,615,616],{},"Brand elements",[29,618,620],{"id":619},"step-2-build-a-monochromatic-scale","Step 2: Build a Monochromatic Scale",[15,622,623],{},"Create 5-7 variations of your primary color at different lightness levels:",[360,625,630],{"className":626,"code":628,"language":629},[627],"language-text","--primary-50:  hsl(200, 100%, 95%);  \u002F* Very light *\u002F\n--primary-100: hsl(200, 100%, 85%);\n--primary-200: hsl(200, 100%, 70%);\n--primary-300: hsl(200, 100%, 55%);\n--primary-400: hsl(200, 100%, 40%);  \u002F* Base *\u002F\n--primary-500: hsl(200, 100%, 30%);\n--primary-600: hsl(200, 100%, 20%);  \u002F* Very dark *\u002F\n","text",[367,631,628],{"__ignoreMap":365},[29,633,635],{"id":634},"step-3-add-neutral-colors","Step 3: Add Neutral Colors",[15,637,638],{},"Grays and near-grays for:",[37,640,641,644,647,650],{},[40,642,643],{},"Backgrounds",[40,645,646],{},"Text (never pure black—use dark gray)",[40,648,649],{},"Borders",[40,651,652],{},"Disabled states",[360,654,656],{"className":362,"code":655,"language":364,"meta":365,"style":365},"--gray-50:  #F9FAFB;\n--gray-100: #F3F4F6;\n--gray-200: #E5E7EB;\n--gray-300: #D1D5DB;\n--gray-400: #9CA3AF;\n--gray-500: #6B7280;\n--gray-600: #4B5563;\n--gray-700: #374151;\n--gray-800: #1F2937;\n--gray-900: #111827;\n",[367,657,658,666,674,682,690,701,711,721,731,741],{"__ignoreMap":365},[370,659,660,663],{"class":372,"line":373},[370,661,662],{"class":383},"--gray-50:  ",[370,664,665],{"class":387},"#F9FAFB;\n",[370,667,668,671],{"class":372,"line":380},[370,669,670],{"class":383},"--gray-100: ",[370,672,673],{"class":387},"#F3F4F6;\n",[370,675,676,679],{"class":372,"line":394},[370,677,678],{"class":383},"--gray-200: ",[370,680,681],{"class":387},"#E5E7EB;\n",[370,683,684,687],{"class":372,"line":409},[370,685,686],{"class":383},"--gray-300: ",[370,688,689],{"class":387},"#D1D5DB;\n",[370,691,692,695,698],{"class":372,"line":415},[370,693,694],{"class":383},"--gray-400: ",[370,696,697],{"class":387},"#9CA3AF",[370,699,700],{"class":383},";\n",[370,702,703,706,709],{"class":372,"line":422},[370,704,705],{"class":383},"--gray-500: ",[370,707,708],{"class":387},"#6B7280",[370,710,700],{"class":383},[370,712,713,716,719],{"class":372,"line":428},[370,714,715],{"class":383},"--gray-600: ",[370,717,718],{"class":387},"#4B5563",[370,720,700],{"class":383},[370,722,723,726,729],{"class":372,"line":439},[370,724,725],{"class":383},"--gray-700: ",[370,727,728],{"class":387},"#374151",[370,730,700],{"class":383},[370,732,733,736,739],{"class":372,"line":450},[370,734,735],{"class":383},"--gray-800: ",[370,737,738],{"class":387},"#1F2937",[370,740,700],{"class":383},[370,742,744,747,750],{"class":372,"line":743},10,[370,745,746],{"class":383},"--gray-900: ",[370,748,749],{"class":387},"#111827",[370,751,700],{"class":383},[29,753,755],{"id":754},"step-4-select-accent-colors","Step 4: Select Accent Colors",[15,757,758],{},"Choose 1-2 colors that complement your primary color:",[37,760,761,764,767],{},[40,762,763],{},"Use analogous colors for harmony",[40,765,766],{},"Use complementary colors for contrast (sparingly)",[40,768,769],{},"Ensure sufficient contrast with your backgrounds",[29,771,773],{"id":772},"step-5-define-semantic-colors","Step 5: Define Semantic Colors",[15,775,776],{},"Colors with specific meanings:",[360,778,780],{"className":362,"code":779,"language":364,"meta":365,"style":365},"--success: #10B981;   \u002F* Green *\u002F\n--warning: #F59E0B;   \u002F* Amber *\u002F\n--error:   #EF4444;   \u002F* Red *\u002F\n--info:    #3B82F6;   \u002F* Blue *\u002F\n",[367,781,782,796,807,818],{"__ignoreMap":365},[370,783,784,787,790,793],{"class":372,"line":373},[370,785,786],{"class":383},"--success: ",[370,788,789],{"class":387},"#10B981",[370,791,792],{"class":383},";   ",[370,794,795],{"class":376},"\u002F* Green *\u002F\n",[370,797,798,801,804],{"class":372,"line":380},[370,799,800],{"class":383},"--warning: ",[370,802,803],{"class":387},"#F59E0B;",[370,805,806],{"class":376},"   \u002F* Amber *\u002F\n",[370,808,809,812,815],{"class":372,"line":394},[370,810,811],{"class":383},"--error:   ",[370,813,814],{"class":387},"#EF4444;",[370,816,817],{"class":376},"   \u002F* Red *\u002F\n",[370,819,820,823,826,828],{"class":372,"line":409},[370,821,822],{"class":383},"--info:    ",[370,824,825],{"class":387},"#3B82F6",[370,827,792],{"class":383},[370,829,830],{"class":376},"\u002F* Blue *\u002F\n",[10,832,834],{"id":833},"dark-mode-design-considerations","Dark Mode Design Considerations",[15,836,837],{},"Dark mode has become essential for modern websites. Designing for dark mode requires more than inverting colors.",[29,839,841],{"id":840},"dark-mode-principles","Dark Mode Principles",[843,844,845,851,857,863],"ol",{},[40,846,847,850],{},[43,848,849],{},"Avoid pure black backgrounds",": Use dark gray (#121212 or similar) to reduce eye strain",[40,852,853,856],{},[43,854,855],{},"Desaturate colors",": Colors appear more vibrant on dark backgrounds—reduce saturation slightly",[40,858,859,862],{},[43,860,861],{},"Increase lightness",": Colors need to be lighter to achieve the same visual weight",[40,864,865,868],{},[43,866,867],{},"Test all interactions",": Hover states, focus rings, and active states need adjustment",[29,870,872],{"id":871},"dark-mode-color-adjustments","Dark Mode Color Adjustments",[360,874,876],{"className":362,"code":875,"language":364,"meta":365,"style":365},"\u002F* Light mode *\u002F\n--primary: hsl(200, 100%, 50%);\n\n\u002F* Dark mode adjustment *\u002F\n.dark {\n  --primary: hsl(200, 80%, 65%);  \u002F* Lighter, less saturated *\u002F\n}\n",[367,877,878,883,888,892,897,906,948],{"__ignoreMap":365},[370,879,880],{"class":372,"line":373},[370,881,882],{"class":376},"\u002F* Light mode *\u002F\n",[370,884,885],{"class":372,"line":380},[370,886,887],{"class":383},"--primary: hsl(200, 100%, 50%);\n",[370,889,890],{"class":372,"line":394},[370,891,419],{"emptyLinePlaceholder":418},[370,893,894],{"class":372,"line":409},[370,895,896],{"class":376},"\u002F* Dark mode adjustment *\u002F\n",[370,898,899,903],{"class":372,"line":415},[370,900,902],{"class":901},"sScJk",".dark",[370,904,905],{"class":383}," {\n",[370,907,908,912,915,919,922,925,928,931,935,937,940,942,945],{"class":372,"line":422},[370,909,911],{"class":910},"s4XuR","  --primary",[370,913,914],{"class":383},": ",[370,916,918],{"class":917},"sj4cs","hsl",[370,920,921],{"class":383},"(",[370,923,924],{"class":917},"200",[370,926,927],{"class":383},", ",[370,929,930],{"class":917},"80",[370,932,934],{"class":933},"szBVR","%",[370,936,927],{"class":383},[370,938,939],{"class":917},"65",[370,941,934],{"class":933},[370,943,944],{"class":383},");  ",[370,946,947],{"class":376},"\u002F* Lighter, less saturated *\u002F\n",[370,949,950],{"class":372,"line":428},[370,951,952],{"class":383},"}\n",[29,954,956],{"id":955},"dark-mode-best-practices","Dark Mode Best Practices",[37,958,959,962,965,968],{},[40,960,961],{},"Maintain the same visual hierarchy as light mode",[40,963,964],{},"Ensure all text meets WCAG contrast requirements in dark mode",[40,966,967],{},"Test with different types of content (images, videos, embeds)",[40,969,970,971,974],{},"Consider user preferences: respect ",[367,972,973],{},"prefers-color-scheme"," media query",[360,976,978],{"className":362,"code":977,"language":364,"meta":365,"style":365},"@media (prefers-color-scheme: dark) {\n  :root {\n    --bg: #121212;\n    --text: #E5E7EB;\n    --primary: hsl(200, 80%, 65%);\n  }\n}\n",[367,979,980,988,995,1007,1019,1047,1052],{"__ignoreMap":365},[370,981,982,985],{"class":372,"line":373},[370,983,984],{"class":933},"@media",[370,986,987],{"class":383}," (prefers-color-scheme: dark) {\n",[370,989,990,993],{"class":372,"line":380},[370,991,992],{"class":901},"  :root",[370,994,905],{"class":383},[370,996,997,1000,1002,1005],{"class":372,"line":394},[370,998,999],{"class":910},"    --bg",[370,1001,914],{"class":383},[370,1003,1004],{"class":917},"#121212",[370,1006,700],{"class":383},[370,1008,1009,1012,1014,1017],{"class":372,"line":409},[370,1010,1011],{"class":910},"    --text",[370,1013,914],{"class":383},[370,1015,1016],{"class":917},"#E5E7EB",[370,1018,700],{"class":383},[370,1020,1021,1024,1026,1028,1030,1032,1034,1036,1038,1040,1042,1044],{"class":372,"line":415},[370,1022,1023],{"class":910},"    --primary",[370,1025,914],{"class":383},[370,1027,918],{"class":917},[370,1029,921],{"class":383},[370,1031,924],{"class":917},[370,1033,927],{"class":383},[370,1035,930],{"class":917},[370,1037,934],{"class":933},[370,1039,927],{"class":383},[370,1041,939],{"class":917},[370,1043,934],{"class":933},[370,1045,1046],{"class":383},");\n",[370,1048,1049],{"class":372,"line":422},[370,1050,1051],{"class":383},"  }\n",[370,1053,1054],{"class":372,"line":428},[370,1055,952],{"class":383},[10,1057,1059],{"id":1058},"common-color-mistakes-to-avoid","Common Color Mistakes to Avoid",[29,1061,1063],{"id":1062},"_1-using-too-many-colors","1. Using Too Many Colors",[15,1065,1066],{},"Limit your palette to 3-5 colors maximum. More creates visual chaos and dilutes brand identity.",[29,1068,1070],{"id":1069},"_2-ignoring-cultural-context","2. Ignoring Cultural Context",[15,1072,1073],{},"Red means \"danger\" in Western cultures but \"luck\" and \"prosperity\" in Chinese culture. Research your audience.",[29,1075,1077],{"id":1076},"_3-relying-only-on-color-for-meaning","3. Relying Only on Color for Meaning",[15,1079,1080],{},"Never use color alone to convey information. Always provide text labels or icons:",[360,1082,1086],{"className":1083,"code":1084,"language":1085,"meta":365,"style":365},"language-html shiki shiki-themes github-light github-dark","\u003C!-- Bad -->\n\u003Cspan style=\"color: red;\">Error\u003C\u002Fspan>\n\n\u003C!-- Good -->\n\u003Cspan class=\"error-icon\">⚠️\u003C\u002Fspan> \u003Cspan style=\"color: red;\">Error\u003C\u002Fspan>\n","html",[367,1087,1088,1093,1119,1123,1128],{"__ignoreMap":365},[370,1089,1090],{"class":372,"line":373},[370,1091,1092],{"class":376},"\u003C!-- Bad -->\n",[370,1094,1095,1098,1101,1104,1107,1111,1114,1116],{"class":372,"line":380},[370,1096,1097],{"class":383},"\u003C",[370,1099,370],{"class":1100},"s9eBZ",[370,1102,1103],{"class":901}," style",[370,1105,1106],{"class":383},"=",[370,1108,1110],{"class":1109},"sZZnC","\"color: red;\"",[370,1112,1113],{"class":383},">Error\u003C\u002F",[370,1115,370],{"class":1100},[370,1117,1118],{"class":383},">\n",[370,1120,1121],{"class":372,"line":394},[370,1122,419],{"emptyLinePlaceholder":418},[370,1124,1125],{"class":372,"line":409},[370,1126,1127],{"class":376},"\u003C!-- Good -->\n",[370,1129,1130,1132,1134,1137,1139,1142,1145,1147,1150,1152,1154,1156,1158,1160,1162],{"class":372,"line":415},[370,1131,1097],{"class":383},[370,1133,370],{"class":1100},[370,1135,1136],{"class":901}," class",[370,1138,1106],{"class":383},[370,1140,1141],{"class":1109},"\"error-icon\"",[370,1143,1144],{"class":383},">⚠️\u003C\u002F",[370,1146,370],{"class":1100},[370,1148,1149],{"class":383},"> \u003C",[370,1151,370],{"class":1100},[370,1153,1103],{"class":901},[370,1155,1106],{"class":383},[370,1157,1110],{"class":1109},[370,1159,1113],{"class":383},[370,1161,370],{"class":1100},[370,1163,1118],{"class":383},[29,1165,1167],{"id":1166},"_4-forgetting-about-color-blindness","4. Forgetting About Color Blindness",[15,1169,1170],{},"Approximately 1 in 12 men and 1 in 200 women have some form of color blindness. Test your designs with color blindness simulators and ensure information isn't conveyed by color alone.",[29,1172,1174],{"id":1173},"_5-using-pure-black-or-pure-white","5. Using Pure Black or Pure White",[15,1176,1177],{},"Pure #000000 and #FFFFFF create too much contrast and can cause eye strain. Use off-black and off-white instead.",[10,1179,1181],{"id":1180},"practical-implementation-with-css","Practical Implementation with CSS",[15,1183,1184],{},"Here's a complete example of a themed color system:",[360,1186,1188],{"className":362,"code":1187,"language":364,"meta":365,"style":365},":root {\n  \u002F* Primary palette *\u002F\n  --color-primary: hsl(200, 100%, 50%);\n  --color-primary-light: hsl(200, 100%, 70%);\n  --color-primary-dark: hsl(200, 100%, 30%);\n\n  \u002F* Neutral palette *\u002F\n  --color-bg: hsl(0, 0%, 100%);\n  --color-bg-alt: hsl(0, 0%, 96%);\n  --color-text: hsl(0, 0%, 13%);\n  --color-text-muted: hsl(0, 0%, 45%);\n  --color-border: hsl(0, 0%, 85%);\n\n  \u002F* Semantic colors *\u002F\n  --color-success: hsl(142, 76%, 36%);\n  --color-warning: hsl(38, 92%, 50%);\n  --color-error: hsl(0, 84%, 60%);\n  --color-info: hsl(200, 100%, 50%);\n}\n\n.dark {\n  --color-bg: hsl(0, 0%, 7%);\n  --color-bg-alt: hsl(0, 0%, 12%);\n  --color-text: hsl(0, 0%, 95%);\n  --color-text-muted: hsl(0, 0%, 60%);\n  --color-border: hsl(0, 0%, 25%);\n}\n",[367,1189,1190,1197,1202,1231,1259,1287,1291,1296,1324,1352,1380,1409,1438,1443,1449,1480,1510,1540,1568,1573,1578,1585,1613,1641,1669,1696,1724],{"__ignoreMap":365},[370,1191,1192,1195],{"class":372,"line":373},[370,1193,1194],{"class":901},":root",[370,1196,905],{"class":383},[370,1198,1199],{"class":372,"line":380},[370,1200,1201],{"class":376},"  \u002F* Primary palette *\u002F\n",[370,1203,1204,1207,1209,1211,1213,1215,1217,1220,1222,1224,1227,1229],{"class":372,"line":394},[370,1205,1206],{"class":910},"  --color-primary",[370,1208,914],{"class":383},[370,1210,918],{"class":917},[370,1212,921],{"class":383},[370,1214,924],{"class":917},[370,1216,927],{"class":383},[370,1218,1219],{"class":917},"100",[370,1221,934],{"class":933},[370,1223,927],{"class":383},[370,1225,1226],{"class":917},"50",[370,1228,934],{"class":933},[370,1230,1046],{"class":383},[370,1232,1233,1236,1238,1240,1242,1244,1246,1248,1250,1252,1255,1257],{"class":372,"line":409},[370,1234,1235],{"class":910},"  --color-primary-light",[370,1237,914],{"class":383},[370,1239,918],{"class":917},[370,1241,921],{"class":383},[370,1243,924],{"class":917},[370,1245,927],{"class":383},[370,1247,1219],{"class":917},[370,1249,934],{"class":933},[370,1251,927],{"class":383},[370,1253,1254],{"class":917},"70",[370,1256,934],{"class":933},[370,1258,1046],{"class":383},[370,1260,1261,1264,1266,1268,1270,1272,1274,1276,1278,1280,1283,1285],{"class":372,"line":415},[370,1262,1263],{"class":910},"  --color-primary-dark",[370,1265,914],{"class":383},[370,1267,918],{"class":917},[370,1269,921],{"class":383},[370,1271,924],{"class":917},[370,1273,927],{"class":383},[370,1275,1219],{"class":917},[370,1277,934],{"class":933},[370,1279,927],{"class":383},[370,1281,1282],{"class":917},"30",[370,1284,934],{"class":933},[370,1286,1046],{"class":383},[370,1288,1289],{"class":372,"line":422},[370,1290,419],{"emptyLinePlaceholder":418},[370,1292,1293],{"class":372,"line":428},[370,1294,1295],{"class":376},"  \u002F* Neutral palette *\u002F\n",[370,1297,1298,1301,1303,1305,1307,1310,1312,1314,1316,1318,1320,1322],{"class":372,"line":439},[370,1299,1300],{"class":910},"  --color-bg",[370,1302,914],{"class":383},[370,1304,918],{"class":917},[370,1306,921],{"class":383},[370,1308,1309],{"class":917},"0",[370,1311,927],{"class":383},[370,1313,1309],{"class":917},[370,1315,934],{"class":933},[370,1317,927],{"class":383},[370,1319,1219],{"class":917},[370,1321,934],{"class":933},[370,1323,1046],{"class":383},[370,1325,1326,1329,1331,1333,1335,1337,1339,1341,1343,1345,1348,1350],{"class":372,"line":450},[370,1327,1328],{"class":910},"  --color-bg-alt",[370,1330,914],{"class":383},[370,1332,918],{"class":917},[370,1334,921],{"class":383},[370,1336,1309],{"class":917},[370,1338,927],{"class":383},[370,1340,1309],{"class":917},[370,1342,934],{"class":933},[370,1344,927],{"class":383},[370,1346,1347],{"class":917},"96",[370,1349,934],{"class":933},[370,1351,1046],{"class":383},[370,1353,1354,1357,1359,1361,1363,1365,1367,1369,1371,1373,1376,1378],{"class":372,"line":743},[370,1355,1356],{"class":910},"  --color-text",[370,1358,914],{"class":383},[370,1360,918],{"class":917},[370,1362,921],{"class":383},[370,1364,1309],{"class":917},[370,1366,927],{"class":383},[370,1368,1309],{"class":917},[370,1370,934],{"class":933},[370,1372,927],{"class":383},[370,1374,1375],{"class":917},"13",[370,1377,934],{"class":933},[370,1379,1046],{"class":383},[370,1381,1383,1386,1388,1390,1392,1394,1396,1398,1400,1402,1405,1407],{"class":372,"line":1382},11,[370,1384,1385],{"class":910},"  --color-text-muted",[370,1387,914],{"class":383},[370,1389,918],{"class":917},[370,1391,921],{"class":383},[370,1393,1309],{"class":917},[370,1395,927],{"class":383},[370,1397,1309],{"class":917},[370,1399,934],{"class":933},[370,1401,927],{"class":383},[370,1403,1404],{"class":917},"45",[370,1406,934],{"class":933},[370,1408,1046],{"class":383},[370,1410,1412,1415,1417,1419,1421,1423,1425,1427,1429,1431,1434,1436],{"class":372,"line":1411},12,[370,1413,1414],{"class":910},"  --color-border",[370,1416,914],{"class":383},[370,1418,918],{"class":917},[370,1420,921],{"class":383},[370,1422,1309],{"class":917},[370,1424,927],{"class":383},[370,1426,1309],{"class":917},[370,1428,934],{"class":933},[370,1430,927],{"class":383},[370,1432,1433],{"class":917},"85",[370,1435,934],{"class":933},[370,1437,1046],{"class":383},[370,1439,1441],{"class":372,"line":1440},13,[370,1442,419],{"emptyLinePlaceholder":418},[370,1444,1446],{"class":372,"line":1445},14,[370,1447,1448],{"class":376},"  \u002F* Semantic colors *\u002F\n",[370,1450,1452,1455,1457,1459,1461,1464,1466,1469,1471,1473,1476,1478],{"class":372,"line":1451},15,[370,1453,1454],{"class":910},"  --color-success",[370,1456,914],{"class":383},[370,1458,918],{"class":917},[370,1460,921],{"class":383},[370,1462,1463],{"class":917},"142",[370,1465,927],{"class":383},[370,1467,1468],{"class":917},"76",[370,1470,934],{"class":933},[370,1472,927],{"class":383},[370,1474,1475],{"class":917},"36",[370,1477,934],{"class":933},[370,1479,1046],{"class":383},[370,1481,1483,1486,1488,1490,1492,1495,1497,1500,1502,1504,1506,1508],{"class":372,"line":1482},16,[370,1484,1485],{"class":910},"  --color-warning",[370,1487,914],{"class":383},[370,1489,918],{"class":917},[370,1491,921],{"class":383},[370,1493,1494],{"class":917},"38",[370,1496,927],{"class":383},[370,1498,1499],{"class":917},"92",[370,1501,934],{"class":933},[370,1503,927],{"class":383},[370,1505,1226],{"class":917},[370,1507,934],{"class":933},[370,1509,1046],{"class":383},[370,1511,1513,1516,1518,1520,1522,1524,1526,1529,1531,1533,1536,1538],{"class":372,"line":1512},17,[370,1514,1515],{"class":910},"  --color-error",[370,1517,914],{"class":383},[370,1519,918],{"class":917},[370,1521,921],{"class":383},[370,1523,1309],{"class":917},[370,1525,927],{"class":383},[370,1527,1528],{"class":917},"84",[370,1530,934],{"class":933},[370,1532,927],{"class":383},[370,1534,1535],{"class":917},"60",[370,1537,934],{"class":933},[370,1539,1046],{"class":383},[370,1541,1543,1546,1548,1550,1552,1554,1556,1558,1560,1562,1564,1566],{"class":372,"line":1542},18,[370,1544,1545],{"class":910},"  --color-info",[370,1547,914],{"class":383},[370,1549,918],{"class":917},[370,1551,921],{"class":383},[370,1553,924],{"class":917},[370,1555,927],{"class":383},[370,1557,1219],{"class":917},[370,1559,934],{"class":933},[370,1561,927],{"class":383},[370,1563,1226],{"class":917},[370,1565,934],{"class":933},[370,1567,1046],{"class":383},[370,1569,1571],{"class":372,"line":1570},19,[370,1572,952],{"class":383},[370,1574,1576],{"class":372,"line":1575},20,[370,1577,419],{"emptyLinePlaceholder":418},[370,1579,1581,1583],{"class":372,"line":1580},21,[370,1582,902],{"class":901},[370,1584,905],{"class":383},[370,1586,1588,1590,1592,1594,1596,1598,1600,1602,1604,1606,1609,1611],{"class":372,"line":1587},22,[370,1589,1300],{"class":910},[370,1591,914],{"class":383},[370,1593,918],{"class":917},[370,1595,921],{"class":383},[370,1597,1309],{"class":917},[370,1599,927],{"class":383},[370,1601,1309],{"class":917},[370,1603,934],{"class":933},[370,1605,927],{"class":383},[370,1607,1608],{"class":917},"7",[370,1610,934],{"class":933},[370,1612,1046],{"class":383},[370,1614,1616,1618,1620,1622,1624,1626,1628,1630,1632,1634,1637,1639],{"class":372,"line":1615},23,[370,1617,1328],{"class":910},[370,1619,914],{"class":383},[370,1621,918],{"class":917},[370,1623,921],{"class":383},[370,1625,1309],{"class":917},[370,1627,927],{"class":383},[370,1629,1309],{"class":917},[370,1631,934],{"class":933},[370,1633,927],{"class":383},[370,1635,1636],{"class":917},"12",[370,1638,934],{"class":933},[370,1640,1046],{"class":383},[370,1642,1644,1646,1648,1650,1652,1654,1656,1658,1660,1662,1665,1667],{"class":372,"line":1643},24,[370,1645,1356],{"class":910},[370,1647,914],{"class":383},[370,1649,918],{"class":917},[370,1651,921],{"class":383},[370,1653,1309],{"class":917},[370,1655,927],{"class":383},[370,1657,1309],{"class":917},[370,1659,934],{"class":933},[370,1661,927],{"class":383},[370,1663,1664],{"class":917},"95",[370,1666,934],{"class":933},[370,1668,1046],{"class":383},[370,1670,1672,1674,1676,1678,1680,1682,1684,1686,1688,1690,1692,1694],{"class":372,"line":1671},25,[370,1673,1385],{"class":910},[370,1675,914],{"class":383},[370,1677,918],{"class":917},[370,1679,921],{"class":383},[370,1681,1309],{"class":917},[370,1683,927],{"class":383},[370,1685,1309],{"class":917},[370,1687,934],{"class":933},[370,1689,927],{"class":383},[370,1691,1535],{"class":917},[370,1693,934],{"class":933},[370,1695,1046],{"class":383},[370,1697,1699,1701,1703,1705,1707,1709,1711,1713,1715,1717,1720,1722],{"class":372,"line":1698},26,[370,1700,1414],{"class":910},[370,1702,914],{"class":383},[370,1704,918],{"class":917},[370,1706,921],{"class":383},[370,1708,1309],{"class":917},[370,1710,927],{"class":383},[370,1712,1309],{"class":917},[370,1714,934],{"class":933},[370,1716,927],{"class":383},[370,1718,1719],{"class":917},"25",[370,1721,934],{"class":933},[370,1723,1046],{"class":383},[370,1725,1727],{"class":372,"line":1726},27,[370,1728,952],{"class":383},[10,1730,1732],{"id":1731},"conclusion","Conclusion",[15,1734,1735],{},"Color theory provides a framework for making intentional, effective color choices in web design. By understanding the color wheel, harmony rules, contrast requirements, and psychological associations, you can create websites that are not only beautiful but also accessible and effective at communicating your message.",[15,1737,1738],{},"Remember: great color design is purposeful, not accidental. Take the time to build a proper color system, test it thoroughly, and iterate based on user feedback.",[10,1740,1742],{"id":1741},"try-it-yourself","Try It Yourself",[15,1744,1745,1746,1748],{},"Use our free ",[470,1747,473],{"href":472}," to create beautiful, accessible color schemes and work with different color formats.",[1750,1751,1752],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}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);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":365,"searchDepth":380,"depth":380,"links":1754},[1755,1756,1761,1768,1773,1774,1781,1786,1793,1794,1795],{"id":12,"depth":380,"text":13},{"id":23,"depth":380,"text":24,"children":1757},[1758,1759,1760],{"id":31,"depth":394,"text":32},{"id":64,"depth":394,"text":65},{"id":91,"depth":394,"text":92},{"id":103,"depth":380,"text":104,"children":1762},[1763,1764,1765,1766,1767],{"id":110,"depth":394,"text":111},{"id":149,"depth":394,"text":150},{"id":183,"depth":394,"text":184},{"id":217,"depth":394,"text":218},{"id":240,"depth":394,"text":241},{"id":287,"depth":380,"text":288,"children":1769},[1770,1771,1772],{"id":294,"depth":394,"text":295},{"id":354,"depth":394,"text":355},{"id":456,"depth":394,"text":457},{"id":477,"depth":380,"text":478},{"id":591,"depth":380,"text":592,"children":1775},[1776,1777,1778,1779,1780],{"id":598,"depth":394,"text":599},{"id":619,"depth":394,"text":620},{"id":634,"depth":394,"text":635},{"id":754,"depth":394,"text":755},{"id":772,"depth":394,"text":773},{"id":833,"depth":380,"text":834,"children":1782},[1783,1784,1785],{"id":840,"depth":394,"text":841},{"id":871,"depth":394,"text":872},{"id":955,"depth":394,"text":956},{"id":1058,"depth":380,"text":1059,"children":1787},[1788,1789,1790,1791,1792],{"id":1062,"depth":394,"text":1063},{"id":1069,"depth":394,"text":1070},{"id":1076,"depth":394,"text":1077},{"id":1166,"depth":394,"text":1167},{"id":1173,"depth":394,"text":1174},{"id":1180,"depth":380,"text":1181},{"id":1731,"depth":380,"text":1732},{"id":1741,"depth":380,"text":1742},"2026-05-26","Learn color theory fundamentals for web design: color wheels, complementary colors, contrast ratios, and accessible color schemes.","md",{"immutable":418},"\u002Fguides\u002Fcolor-theory-web-design",{"title":5,"description":1797},"guides\u002Fcolor-theory-web-design","FzjR-gmU5BjxetXVh3bVWx4sHGyf0Pv4JrheO33d8Co",1780401322900]