1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/570bdcfc936308af-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/68c5787607b6894a-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/af89c8d08109c709.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-791713dca881368f.js"/>
1<script src="/_next/static/chunks/4bd1b696-27a29b6b1cff5433.js" async=""></script>
1<script src="/_next/static/chunks/587-26af9df8292e2b0d.js" async=""></script>
1<script src="/_next/static/chunks/main-app-54020a3bf9ccf594.js" async=""></script>
1<script src="/_next/static/chunks/445-2edaf82f81c27c2f.js" async=""></script>
1<script src="/_next/static/chunks/493-9059d463e843d1b0.js" async=""></script>
1<script src="/_next/static/chunks/app/(tools)/color-wheel/page-9a9f0ff4545d2277.js" async=""></script>
1<script src="/_next/static/chunks/app/page-813de729857d1533.js" async=""></script>
1<script src="/_next/static/chunks/31-7af81ebcaf37244a.js" async=""></script>
1<script src="/_next/static/chunks/app/layout-4b98a1f728d04f33.js" async=""></script>
1<link rel="preload" href="https://www.googletagmanager.com/gtag/js?id=G-0TQX8EDTM8" as="script"/><meta name="next-size-adjust" content=""/><link rel="preconnect" href="https://a.pub.network/" crossorigin="anonymous"/><link rel="preconnect" href="https://b.pub.network/" crossorigin="anonymous"/><link rel="preconnect" href="https://c.pub.network/" crossorigin="anonymous"/><link rel="preconnect" href="https://d.pub.network/" crossorigin="anonymous"/><link rel="preconnect" href="https://c.amazon-adsystem.com" crossorigin="anonymous"/><link rel="preconnect" href="https://s.amazon-adsystem.com" crossorigin="anonymous"/><link rel="preconnect" href="https://btloader.com/" crossorigin="anonymous"/><link rel="preconnect" href="https://api.btloader.com/" crossorigin="anonymous"/><link rel="preconnect" href="https://cdn.confiant-integrations.net" crossorigin="anonymous"/><title>Color Wheel â HTML Color Codes</title><meta name="description" content="Create perfect color palettes with our color wheel. Start with a base color and find complementary, analogous, triadic and other schemes to elevate your designs."/><link rel="canonical" href="https://htmlcolorcodes.com/color-wheel/"/><link rel="alternate" hrefLang="x-default" href="https://htmlcolorcodes.com/color-wheel/"/><link rel="alternate" hrefLang="en" href="https://htmlcolorcodes.com/color-wheel/"/><link rel="alternate" hrefLang="es" href="https://htmlcolorcodes.com/es/circulo-cromatico/"/><link rel="alternate" hrefLang="fr" href="https://htmlcolorcodes.com/fr/roue-chromatique/"/><link rel="alternate" hrefLang="zh" href="https://htmlcolorcodes.com/zh/se-lun/"/><meta property="og:title" content="Color Wheel"/><meta property="og:description" content="Create perfect color palettes with our color wheel. Start with a base color and find complementary, analogous, triadic and other schemes to elevate your designs."/><meta property="og:url" content="https://htmlcolorcodes.com/color-wheel/"/><meta property="og:site_name" content="HTML Color Codes"/><meta property="og:image" content="https://colorcodes.imgix.net/4nxeT3Q1pjUgS5Stnppzij/debf01a3d3b9d768e9c6e0da8ff41d49/color-wheel-hero.jpg"/><meta property="og:image:width" content="1920"/><meta property="og:image:height" content="1200"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Color Wheel"/><meta name="twitter:description" content="Create perfect color palettes with our color wheel. Start with a base color and find complementary, analogous, triadic and other schemes to elevate your designs."/><meta name="twitter:image" content="https://colorcodes.imgix.net/4nxeT3Q1pjUgS5Stnppzij/debf01a3d3b9d768e9c6e0da8ff41d49/color-wheel-hero.jpg"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/><link rel="icon" href="/icon.svg?4ee8f32a0051c5ff" type="image/svg+xml" sizes="any"/><link rel="icon" href="/icon1.png?55484c957f146e37" type="image/png" sizes="192x192"/><link rel="icon" href="/icon2.png?e54694489ec32db1" type="image/png" sizes="512x512"/><link rel="apple-touch-icon" href="/apple-icon.png?7fbf5257c37bc783" type="image/png" sizes="180x180"/>
1<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script>
1</head><body class="__variable_0cacfd font-sans antialiased bg-neutral-50"><nav class="w-full relative h-12 sm:h-16 bg-white border-b border-neutral-200 z-[calc(infinity)]"><div data-menu-type="header" class="flex items-center relative h-12 sm:h-full mx-auto px-3 sm:px-4 lg:px-8"><ul class="items-center flex w-full max-w-screen-xl mx-auto"><li class="group"><a class="font-medium whitespace-nowrap leading-none flex leading-none text-xl mr-2 lg:mr-3 size-6 sm:size-8 [&_svg]:size-6 sm:[&_svg]:size-8" href="/"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M30.7819 9.87827C29.9779 7.93706 28.7993 6.17324 27.3136 4.6875L20.2432 11.7579C21.3286 12.8436 22 14.3434 22 16C22 16.0004 22 16.0008 22 16.0012H31.9999C31.9999 13.9001 31.586 11.8195 30.7819 9.87827Z" fill="#C11007"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M20.241 20.2441C19.1553 21.329 17.656 21.9998 16 21.9998C15.9997 21.9998 15.9993 21.9998 15.999 21.9998V32.0022C18.1002 32.0022 20.1807 31.5883 22.122 30.7843C24.0632 29.9802 25.827 28.8016 27.3127 27.3159L20.241 20.2441Z" fill="#861043"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M20.2412 20.2431L27.3138 27.3157C28.7995 25.8299 29.978 24.0661 30.7821 22.1249C31.5862 20.1837 32.0001 18.1031 32.0001 16.002H21.999C21.9985 17.6583 21.3268 19.1577 20.2412 20.2431Z" fill="#A50C36"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M8.45766 30.1107C10.7782 31.3511 13.3688 32 16 32L16 22C12.6863 22 10 19.3137 10 16C10 12.6863 12.6863 10 16 10C17.6569 10 19.1569 10.6716 20.2426 11.7574L27.3137 4.68629C25.4532 2.82574 23.1625 1.45276 20.6446 0.688956C18.1266 -0.074846 15.4592 -0.205888 12.8786 0.307437C10.2979 0.820761 7.88367 1.96261 5.84971 3.63183C3.81575 5.30106 2.22485 7.44614 1.21793 9.87707C0.211009 12.308 -0.180856 14.9497 0.0770484 17.5683C0.334953 20.1868 1.23466 22.7013 2.69649 24.8891C4.15832 27.0769 6.13713 28.8704 8.45766 30.1107Z" fill="#F54927"></path></svg></a></li><li class="group"><a class="inline-flex items-center justify-center gap-2 transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-10 rounded-lg text-base [&_svg]:size-5 font-medium whitespace-nowrap leading-none group has-[>svg]:px-3 px-3 lg:px-4 lg:has-[>svg]:px-4" href="/color-picker/"><span class="size-5 [&_svg]:size-5 sm:mr-0.5"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M222,67.34a33.81,33.81,0,0,0-10.64-24.25C198.12,30.56,176.68,31,163.54,44.18L142.82,65l-.63-.63a22,22,0,0,0-31.11,0l-9,9a14,14,0,0,0,0,19.81l3.47,3.47L53.14,149.1a37.81,37.81,0,0,0-9.84,36.73l-8.31,19a11.68,11.68,0,0,0,2.46,13A13.91,13.91,0,0,0,47.32,222,14.15,14.15,0,0,0,53,220.82L71,212.92a37.92,37.92,0,0,0,35.84-10.07l52.44-52.46,3.47,3.48a14,14,0,0,0,19.8,0l9-9a22.06,22.06,0,0,0,0-31.13l-.66-.65L212,91.85A33.76,33.76,0,0,0,222,67.34Zm-123.61,127a26,26,0,0,1-26,6.47,6,6,0,0,0-4.17.24l-20,8.75a2,2,0,0,1-2.09-.31l9.12-20.9a5.94,5.94,0,0,0,.19-4.31A25.91,25.91,0,0,1,56,166h70.78ZM138.78,154H65.24l48.83-48.84,36.76,36.78Zm64.77-70.59L178.17,108.9a6,6,0,0,0,0,8.47l4.88,4.89a10,10,0,0,1,0,14.15l-9,9a2,2,0,0,1-2.82,0l-60.69-60.7a2,2,0,0,1,0-2.83l9-9a10,10,0,0,1,14.14,0l4.89,4.89a6,6,0,0,0,4.24,1.75h0a6,6,0,0,0,4.25-1.77L172,52.66c8.57-8.58,22.51-9,31.07-.85a22,22,0,0,1,.44,31.57Z"></path></svg></span><span class="flex items-center gap-x-2 font-bold text-sm sm:text-base">Picker</span></a></li><li class="group"><a class="inline-flex items-center justify-center gap-2 transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-10 rounded-lg text-base [&_svg]:size-5 font-medium whitespace-nowrap leading-none group has-[>svg]:px-3 px-3 lg:px-4 lg:has-[>svg]:px-4" href="/image-color-picker/"><span class="size-5 [&_svg]:size-5 sm:mr-0.5"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M208,34H48A14,14,0,0,0,34,48V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V48A14,14,0,0,0,208,34ZM46,208V48a2,2,0,0,1,2-2H208a2,2,0,0,1,2,2v82.2l-28.1-28.1a14,14,0,0,0-19.8,0L54.2,210H48A2,2,0,0,1,46,208Zm162,2H71.17l99.41-99.41a2,2,0,0,1,2.83,0L210,147.17V208A2,2,0,0,1,208,210ZM96,118A22,22,0,1,0,74,96,22,22,0,0,0,96,118Zm0-32A10,10,0,1,1,86,96,10,10,0,0,1,96,86Z"></path></svg></span><span class="flex items-center gap-x-2 font-bold text-sm sm:text-base">Image</span><span class="bg-orange-600 w-1.5 h-1.5 -mt-2 -ml-1 rounded-full"></span></a></li><li class="group"><a class="inline-flex items-center justify-center gap-2 transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-10 rounded-lg text-base [&_svg]:size-5 font-medium whitespace-nowrap leading-none group has-[>svg]:px-3 px-3 lg:px-4 lg:has-[>svg]:px-4" href="/color-wheel/"><span class="size-5 [&_svg]:size-5 sm:mr-0.5"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M128,26A102,102,0,1,0,230,128,102.12,102.12,0,0,0,128,26Zm89.89,97.44c-31,22.37-53.66,15.36-77.93,3.75,21.43-14.75,42.27-33.21,41.51-71.54A90,90,0,0,1,217.89,123.44ZM169,47.89c3.84,38-13.53,54.13-35.71,69.34C131.22,91.29,125.67,64,92.06,45.5A89.88,89.88,0,0,1,169,47.89ZM79.14,52.45C114,68.15,119.23,91.23,121.32,118c-23.5-11.18-49.92-20-82.75-.17A90.12,90.12,0,0,1,79.14,52.45Zm-41,80.11c31.05-22.37,53.66-15.36,77.93-3.75C94.61,143.56,73.77,162,74.53,200.35A90,90,0,0,1,38.11,132.56ZM87,208.11c-3.84-38,13.53-54.13,35.71-69.34,2.06,25.94,7.61,53.24,41.22,71.73A89.88,89.88,0,0,1,87,208.11Zm89.85-4.56C142,187.85,136.77,164.77,134.68,138c13.36,6.36,27.67,12,43.56,12,12.06,0,25-3.23,39.19-11.79A90.15,90.15,0,0,1,176.86,203.55Z"></path></svg></span><span class="flex items-center gap-x-2 font-bold text-sm sm:text-base">Wheel</span><span class="bg-orange-600 w-1.5 h-1.5 -mt-2 -ml-1 rounded-full"></span></a></li><li class="group hidden md:list-item"><a class="justify-center gap-2 whitespace-nowrap font-medium transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-10 rounded-lg text-base [&_svg]:size-5 group flex items-center group has-[>svg]:px-3 px-3 lg:px-4 lg:has-[>svg]:px-4" aria-expanded="false" data-state="closed" href="/color-names/"><span class="size-5 [&_svg]:size-5 sm:mr-0.5"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
1<path d="M237,164.67a6,6,0,0,0-10,0c-.7,1-17,25.72-17,43.33a22,22,0,0,0,44,0C254,190.39,237.69,165.71,237,164.67ZM232,218a10,10,0,0,1-10-10c0-8.17,5.37-19.92,10-28.34,4.63,8.41,10,20.15,10,28.34A10,10,0,0,1,232,218Zm1.9-80.82a6,6,0,0,0,2.34-9.94L120.76,11.76a6,6,0,0,0-8.49,0l-42,42-26-26a6,6,0,0,0-8.49,8.48l26,26L16.44,107.59a22,22,0,0,0,0,31.11l84.86,84.86a22,22,0,0,0,31.11,0l78.83-78.83Zm-30.14-1.94-79.83,79.83a10,10,0,0,1-14.14,0L24.93,130.21a10,10,0,0,1,0-14.14L70.25,70.75l31.62,31.61a26,26,0,0,0,3.75,32,26,26,0,0,0,36.76,0h0a26,26,0,0,0-32-40.51L78.74,62.26l37.78-37.77L220.89,128.86l-14.79,4.93A6.07,6.07,0,0,0,203.76,135.24ZM114.1,106.11l0,0a14,14,0,1,1,0,19.82,13.91,13.91,0,0,1,0-19.82Z"></path></svg></span><span class="font-bold">Names</span><span class="text-neutral-500"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" class="!size-3 group-data-[state=open]:rotate-180 transition-transform duration-200 group-data-[state=open]:duration-375 ease-in-out-cubic"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg></span></a><div class="absolute bg-white invisible animate-slideUpReverse top-14 p-2 border border-neutral-200 rounded-xl" role="region"><ul class="flex flex-col"><li><a class="inline-flex items-center justify-center gap-2 transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-10 rounded-lg text-base [&_svg]:size-5 font-medium whitespace-nowrap leading-none group has-[>svg]:px-3 px-3 lg:px-4 lg:has-[>svg]:px-4" href="/color-names/">HTML Color Names</a></li><li><a class="inline-flex items-center justify-center gap-2 transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-10 rounded-lg text-base [&_svg]:size-5 font-medium whitespace-nowrap leading-none group has-[>svg]:px-3 px-3 lg:px-4 lg:has-[>svg]:px-4" href="/minecraft-color-codes/">Minecraft Color Codes</a></li><li><a class="inline-flex items-center justify-center gap-2 transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-10 rounded-lg text-base [&_svg]:size-5 font-medium whitespace-nowrap leading-none group has-[>svg]:px-3 px-3 lg:px-4 lg:has-[>svg]:px-4" href="/bukkit-color-codes/">
1Bukkit Color Codes</a></li><li><a class="inline-flex items-center justify-center gap-2 transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-10 rounded-lg text-base [&_svg]:size-5 font-medium whitespace-nowrap leading-none group has-[>svg]:px-3 px-3 lg:px-4 lg:has-[>svg]:px-4" href="/roblox-color-codes/">Roblox Color Codes</a></li></ul></div></li><li class="group hidden sm:list-item"><a class="inline-flex items-center justify-center gap-2 transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-10 rounded-lg text-base [&_svg]:size-5 font-medium whitespace-nowrap leading-none group has-[>svg]:px-3 px-3 lg:px-4 lg:has-[>svg]:px-4" href="/color-chart/"><span class="size-5 [&_svg]:size-5 sm:mr-0.5"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M104,42H56A14,14,0,0,0,42,56v48a14,14,0,0,0,14,14h48a14,14,0,0,0,14-14V56A14,14,0,0,0,104,42Zm2,62a2,2,0,0,1-2,2H56a2,2,0,0,1-2-2V56a2,2,0,0,1,2-2h48a2,2,0,0,1,2,2Zm94-62H152a14,14,0,0,0-14,14v48a14,14,0,0,0,14,14h48a14,14,0,0,0,14-14V56A14,14,0,0,0,200,42Zm2,62a2,2,0,0,1-2,2H152a2,2,0,0,1-2-2V56a2,2,0,0,1,2-2h48a2,2,0,0,1,2,2Zm-98,34H56a14,14,0,0,0-14,14v48a14,14,0,0,0,14,14h48a14,14,0,0,0,14-14V152A14,14,0,0,0,104,138Zm2,62a2,2,0,0,1-2,2H56a2,2,0,0,1-2-2V152a2,2,0,0,1,2-2h48a2,2,0,0,1,2,2Zm94-62H152a14,14,0,0,0-14,14v48a14,14,0,0,0,14,14h48a14,14,0,0,0,14-14V152A14,14,0,0,0,200,138Zm2,62a2,2,0,0,1-2,2H152a2,2,0,0,1-2-2V152a2,2,0,0,1,2-2h48a2,2,0,0,1,2,2Z"></path></svg></span><span class="flex items-center gap-x-2 font-bold text-sm sm:text-base">Chart</span><span class="bg-orange-600 w-1.5 h-1.5 -mt-2 -ml-1 rounded-full"></span></a></li><li class="group hidden sm:list-item"><a class="inline-flex items-center justify-center gap-2 transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-10 rounded-lg text-base [&_svg]:size-5 font-medium whitespace-nowrap leading-none group has-[>svg]:px-3 px-3 lg:px-4 lg:has-[>svg]:px-4" href="/colors/"><span class="size-5 [&_svg]:size-5 sm:mr-0.5"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M86,180a10,10,0,1,1-10-10A10,10,0,0,1,86,180Zm152-23.81V208a14,14,0,0,1-14,14H76a44.18,44.18,0,0,1-7.58-.65,42,42,0,0,1-33.81-48.64l25-143.13A13.94,13.94,0,0,1,75.82,18.22l54.67,9.72a14,14,0,0,1,11.3,16.21l-12.67,72.44,71-25.75a14,14,0,0,1,17.89,8.32l19.09,52.22A15.66,15.66,0,0,1,238,156.19Zm-133.07,29L130,42.08a2,2,0,0,0-1.58-2.32L73.72,30l-.34,0a1.84,1.84,0,0,0-1.07.35,2,2,0,0,0-.82,1.3l-25,143.13a30,30,0,0,0,24.09,34.76,29.25,29.25,0,0,0,22-4.89,29.81,29.81,0,0,0,12.33-19.44Zm8.25,13.17L224.71,158a2,2,0,0,0,1.11-1,1.86,1.86,0,0,0,.06-1.46l-19.09-52.21a2,2,0,0,0-2.53-1.17l-77.53,28.09-10,57.07A41.9,41.9,0,0,1,113.18,198.38ZM226,170.27,116.35,210H224a2,2,0,0,0,2-2Z"></path></svg></span><span class="flex items-center gap-x-2 font-bold text-sm sm:text-base">Library</span></a></li><li class="group hidden md:list-item"><a class="justify-center gap-2 whitespace-nowrap font-medium transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-10 rounded-lg text-base [&_svg]:size-5 group flex items-center group has-[>svg]:px-3 px-3 lg:px-4 lg:has-[>svg]:px-4" aria-expanded="false" data-state="closed" href="/rgb-to-hex/"><span class="size-5 [&_svg]:size-5 sm:mr-0.5"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M222,48V96a6,6,0,0,1-6,6H168a6,6,0,0,1,0-12h33.52L183.47,72a81.51,81.51,0,0,0-57.53-24h-.46A81.5,81.5,0,0,0,68.19,71.28a6,6,0,1,1-8.38-8.58,93.38,93.38,0,0,1,65.67-26.76H126a93.45,93.45,0,0,1,66,27.53l18,18V48a6,6,0,0,1,12,0ZM187.81,184.72a81.5,81.5,0,0,1-57.29,23.34h-.46a81.51,81.51,0,0,1-57.53-24L54.48,166H88a6,6,0,0,0,0-12H40a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V174.48l18,18.05a93.45,93.45,0,0,0,66,27.53h.52a93.38,93.38,0,0,0,65.67-26.76,6,6,0,1,0-8.38-8.58Z"></path></svg></span><span class="font-bold">Convert</span><span class="text-neutral-500"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" class="!size-3 group-data-[state=open]:rotate-180 transition-transform duration-200 group-data-[state=open]:duration-375 ease-in-out-cubic"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg></span></a><div class="absolute bg-white invisible animate-slideUpReverse top-14 p-2 border border-neutral-200 rounded-xl" role="region"><ul class="flex flex-col"><li><a class="inline-flex items-center justify-center gap-2 transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-10 rounded-lg text-base [&_svg]:size-5 font-medium whitespace-nowrap leading-none group has-[>svg]:px-3 px-3 lg:px-4 lg:has-[>svg]:px-4" href="/rgb-to-hex/">RGB to Hex</a></li><li><a class="inline-flex items-center justify-center gap-2 transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-10 rounded-lg text-base [&_svg]:size-5 font-medium whitespace-nowrap leading-none group has-[>svg]:px-3 px-3 lg:px-4 lg:has-[>svg]:px-4" href="/hex-to-rgb/">Hex to RGB</a></li></ul></div></li><li class="group hidden md:list-item"><button class="justify-center gap-2 whitespace-nowrap font-medium transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-10 rounded-lg text-base [&_svg]:size-5 group flex items-center group has-[>svg]:px-3 px-3 lg:px-4 lg:has-[>svg]:px-4" aria-expanded="false" data-state="closed"><span class="size-5 [&_svg]:size-5 sm:mr-0.5"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M216,26H72A38,38,0,0,0,34,64v72a22,22,0,0,0,22,22h48a2,2,0,0,1,2,2.23L98.08,207a6.74,6.74,0,0,0-.08,1,30,30,0,0,0,60,0,6.74,6.74,0,0,0-.08-1L150,160.23a2,2,0,0,1,2-2.23h48a22,22,0,0,0,22-22V32A6,6,0,0,0,216,26ZM72,38H178V80a6,6,0,0,0,12,0V38h20v68H46V64A26,26,0,0,1,72,38ZM200,146H152a14,14,0,0,0-13.86,16l0,.15L146,208.47a18,18,0,0,1-36,0l7.82-46.34,0-.15A14,14,0,0,0,104,146H56a10,10,0,0,1-10-10V118H210v18A10,10,0,0,1,200,146Z"></path></svg></span><span class="font-bold">Tools</span><span class="text-neutral-500"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256" class="!size-3 group-data-[state=open]:rotate-180 transition-transform duration-200 group-data-[state=open]:duration-375 ease-in-out-cubic"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg></span></button><div class="absolute bg-white invisible animate-slideUpReverse top-14 p-2 border border-neutral-200 rounded-xl" role="region"><ul class="flex flex-col"><li><a class="inline-flex items-center justify-center gap-2 transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-10 rounded-lg text-base [&_svg]:size-5 font-medium whitespace-nowrap leading-none group has-[>svg]:px-3 px-3 lg:px-4 lg:has-[>svg]:px-4" href="/contrast-checker/">Contrast Checker</a></li><li><a class="inline-flex items-center justify-center gap-2 transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-10 rounded-lg text-base [&_svg]:size-5 font-medium whitespace-nowrap leading-none group has-[>svg]:px-3 px-3 lg:px-4 lg:has-[>svg]:px-4" href="/color-mixer/">Color Mixer</a></li></ul></div></li><li class="group hidden sm:list-item"><a class="inline-flex items-center justify-center gap-2 transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-10 rounded-lg text-base [&_svg]:size-5 font-medium whitespace-nowrap leading-none group has-[>svg]:px-3 px-3 lg:px-4 lg:has-[>svg]:px-4" href="/blog/"><span class="flex items-center gap-x-2 font-bold text-sm sm:text-base">Blog</span></a></li><li class="group hidden lg:list-item ml-auto"><a href="https://loremipsum.io/font-generator/" class="inline-flex items-center justify-center gap-2 transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer text-secondary-foreground hover:bg-neutral-200 disabled:text-neutral-600 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 h-8 rounded-md px-3 text-sm [&_svg]:size-4 font-medium whitespace-nowrap leading-none group bg-neutral-200">Font Generator</a></li><li class="group md:hidden ml-auto"><button class="justify-center gap-2 whitespace-nowrap font-medium transition-colors disabled:hover:bg-transparent disabled:pointer-events-none disabled:hover:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer hover:text-accent-foreground hover:bg-neutral-100 disabled:text-neutral-500 focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 roun
1ded-lg text-base [&_svg]:size-5 group flex items-center group relative w-8 h-8 p-1.5" aria-expanded="false" data-state="closed"><span class="absolute block top-2.5 right-1.5 w-full max-w-4 h-[0.09375rem] bg-black rounded-full group-data-[state=open]:-rotate-45 origin-top-right group-data-[state=open]:max-w-[15px] transition-all duration-200 ease-in-out-cubic group-data-[state=open]:duration-375 group-data-[state=open]:-translate-x-[5px]"></span><span class="absolute block top-[15px] right-1.5 w-full max-w-5 h-[0.09375rem] bg-black rounded-full group-data-[state=open]:scale-0 transition-transform duration-200 group-data-[state=open]:duration-375 ease-in-out-cubic"></span><span class="absolute block top-5 right-1.5 w-full max-w-3 h-[0.09375rem] bg-black rounded-full group-data-[state=open]:rotate-45 origin-bottom-right group-data-[state=open]:max-w-[15px] transition-all duration-200 ease-in-out-cubic group-data-[state=open]:duration-375 group-data-[state=open]:-translate-x-[5px]"></span></button><div class="absolute bg-white invisible animate-slideUpReverse top-12 left-0 right-0 border-b border-neutral-200 max-h-[calc(100dvh-4rem)] overflow-y-auto p-4" role="region"><div class="text-sm font-medium mb-3 text-neutral-500">Popular tools</div><ul class="flex flex-col gap-4 items-start"><li class="group"><a class="font-medium whitespace-nowrap leading-none flex items-center gap-x-3" href="/color-picker/"><span class="size-6 [&_svg]:size-6"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M222,67.34a33.81,33.81,0,0,0-10.64-24.25C198.12,30.56,176.68,31,163.54,44.18L142.82,65l-.63-.63a22,22,0,0,0-31.11,0l-9,9a14,14,0,0,0,0,19.81l3.47,3.47L53.14,149.1a37.81,37.81,0,0,0-9.84,36.73l-8.31,19a11.68,11.68,0,0,0,2.46,13A13.91,13.91,0,0,0,47.32,222,14.15,14.15,0,0,0,53,220.82L71,212.92a37.92,37.92,0,0,0,35.84-10.07l52.44-52.46,3.47,3.48a14,14,0,0,0,19.8,0l9-9a22.06,22.06,0,0,0,0-31.13l-.66-.65L212,91.85A33.76,33.76,0,0,0,222,67.34Zm-123.61,127a26,26,0,0,1-26,6.47,6,6,0,0,0-4.17.24l-20,8.75a2,2,0,0,1-2.09-.31l9.12-20.9a5.94,5.94,0,0,0,.19-4.31A25.91,25.91,0,0,1,56,166h70.78ZM138.78,154H65.24l48.83-48.84,36.76,36.78Zm64.77-70.59L178.17,108.9a6,6,0,0,0,0,8.47l4.88,4.89a10,10,0,0,1,0,14.15l-9,9a2,2,0,0,1-2.82,0l-60.69-60.7a2,2,0,0,1,0-2.83l9-9a10,10,0,0,1,14.14,0l4.89,4.89a6,6,0,0,0,4.24,1.75h0a6,6,0,0,0,4.25-1.77L172,52.66c8.57-8.58,22.51-9,31.07-.85a22,22,0,0,1,.44,31.57Z"></path></svg></span><span class="flex items-center gap-x-2 font-bold text-3xl">Picker</span></a></li><li class="group"><a class="font-medium whitespace-nowrap leading-none flex items-center gap-x-3" href="/image-color-picker/"><span class="size-6 [&_svg]:size-6"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M208,34H48A14,14,0,0,0,34,48V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V48A14,14,0,0,0,208,34ZM46,208V48a2,2,0,0,1,2-2H208a2,2,0,0,1,2,2v82.2l-28.1-28.1a14,14,0,0,0-19.8,0L54.2,210H48A2,2,0,0,1,46,208Zm162,2H71.17l99.41-99.41a2,2,0,0,1,2.83,0L210,147.17V208A2,2,0,0,1,208,210ZM96,118A22,22,0,1,0,74,96,22,22,0,0,0,96,118Zm0-32A10,10,0,1,1,86,96,10,10,0,0,1,96,86Z"></path></svg></span><span class="flex items-center gap-x-2 font-bold text-3xl">Image</span><span class="bg-orange-600 w-1.5 h-1.5 -mt-2 -ml-1 rounded-full"></span></a></li><li class="group"><a class="font-medium whitespace-nowrap leading-none flex items-center gap-x-3" href="/color-wheel/"><span class="size-6 [&_svg]:size-6"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M128,26A102,102,0,1,0,230,128,102.12,102.12,0,0,0,128,26Zm89.89,97.44c-31,22.37-53.66,15.36-77.93,3.75,21.43-14.75,42.27-33.21,41.51-71.54A90,90,0,0,1,217.89,123.44ZM169,47.89c3.84,38-13.53,54.13-35.71,69.34C131.22,91.29,125.67,64,92.06,45.5A89.88,89.88,0,0,1,169,47.89ZM79.14,52.45C114,68.15,119.23,91.23,121.32,118c-23.5-11.18-49.92-20-82.75-.17A90.12,90.12,0,0,1,79.14,52.45Zm-41,80.11c31.05-22.37,53.66-15.36,77.93-3.75C94.61,143.56,73.77,162,74.53,200.35A90,90,0,0,1,38.11,132.56ZM87,208.11c-3.84-38,13.53-54.13,35.71-69.34,2.06,25.94,7.61,53.24,41.22,71.73A89.88,89.88,0,0,1,87,208.11Zm89.85-4.56C142,187.85,136.77,164.77,134.68,138c13.36,6.36,27.67,12,43.56,12,12.06,0,25-3.23,39.19-11.79A90.15,90.15,0,0,1,176.86,203.55Z"></path></svg></span><span class="flex items-center gap-x-2 font-bold text-3xl">Wheel</span><span class="bg-orange-600 w-1.5 h-1.5 -mt-2 -ml-1 rounded-full"></span></a></li><li class="group"><a class="font-medium whitespace-nowrap leading-none flex items-center gap-x-3" href="/colors/"><span class="size-6 [&_svg]:size-6"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
1<path d="M86,180a10,10,0,1,1-10-10A10,10,0,0,1,86,180Zm152-23.81V208a14,14,0,0,1-14,14H76a44.18,44.18,0,0,1-7.58-.65,42,42,0,0,1-33.81-48.64l25-143.13A13.94,13.94,0,0,1,75.82,18.22l54.67,9.72a14,14,0,0,1,11.3,16.21l-12.67,72.44,71-25.75a14,14,0,0,1,17.89,8.32l19.09,52.22A15.66,15.66,0,0,1,238,156.19Zm-133.07,29L130,42.08a2,2,0,0,0-1.58-2.32L73.72,30l-.34,0a1.84,1.84,0,0,0-1.07.35,2,2,0,0,0-.82,1.3l-25,143.13a30,30,0,0,0,24.09,34.76,29.25,29.25,0,0,0,22-4.89,29.81,29.81,0,0,0,12.33-19.44Zm8.25,13.17L224.71,158a2,2,0,0,0,1.11-1,1.86,1.86,0,0,0,.06-1.46l-19.09-52.21a2,2,0,0,0-2.53-1.17l-77.53,28.09-10,57.07A41.9,41.9,0,0,1,113.18,198.38ZM226,170.27,116.35,210H224a2,2,0,0,0,2-2Z"></path></svg></span><span class="flex items-center gap-x-2 font-bold text-3xl">Library</span></a></li><li class="group"><a class="font-medium whitespace-nowrap leading-none flex items-center gap-x-3" href="/blog/"><span class="size-6 [&_svg]:size-6"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M216,42H40A14,14,0,0,0,26,56V200a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V56A14,14,0,0,0,216,42Zm2,158a2,2,0,0,1-2,2H40a2,2,0,0,1-2-2V56a2,2,0,0,1,2-2H216a2,2,0,0,1,2,2ZM182,96a6,6,0,0,1-6,6H80a6,6,0,0,1,0-12h96A6,6,0,0,1,182,96Zm0,32a6,6,0,0,1-6,6H80a6,6,0,0,1,0-12h96A6,6,0,0,1,182,128Zm0,32a6,6,0,0,1-6,6H80a6,6,0,0,1,0-12h96A6,6,0,0,1,182,160Z"></path></svg></span><span class="flex items-center gap-x-2 font-bold text-3xl">Blog</span></a></li></ul><div class="grid grid-cols-2 gap-y-3 border-t border-neutral-200 pt-4 mt-5"><div class="flex flex-col gap-1.5 items-start"><a class="text-sm font-medium text-neutral-500" href="/color-names/">Names</a><ul class="flex flex-col gap-1 items-start"><li class="group"><a class="whitespace-nowrap flex font-bold text-lg" href="/color-names/">HTML</a></li><li class="group"><a class="whitespace-nowrap flex font-bold text-lg" href="/minecraft-color-codes/">Minecraft</a></li><li class="group"><a class="whitespace-nowrap flex font-bold text-lg" href="/bukkit-color-codes/">Bukkit</a></li><li class="group"><a class="whitespace-nowrap flex font-bold text-lg" href="/roblox-color-codes/">Roblox</a></li></ul></div><div class="flex flex-col gap-1.5 items-start"><a class="text-sm font-medium text-neutral-500" href="/color-chart/">Charts</a><ul class="flex flex-col gap-1 items-start"><li class="group"><a class="whitespace-nowrap flex font-bold text-lg" href="/color-chart/tailwind-color-chart/">Tailwind</a></li><li class="group"><a class="whitespace-nowrap flex font-bold text-lg" href="/color-chart/flat-design-color-chart/">Flat Design</a></li><li class="group"><a class="whitespace-nowrap flex font-bold text-lg" href="/color-chart/material-design-color-chart/">Material Design</a></li><li class="group"><a class="whitespace-nowrap flex font-bold text-lg" href="/color-chart/web-safe-color-chart/">Web Safe</a></li></ul></div><div class="flex flex-col gap-1.5 items-start"><div class="text-sm font-medium text-neutral-500">Convert</div><ul class="flex flex-col gap-1 items-start"><li class="group"><a class="whitespace-nowrap flex font-bold text-lg" href="/rgb-to-hex/">RGB to Hex</a></li><li class="group"><a class="whitespace-nowrap flex font-bold text-lg" href="/hex-to-rgb/">Hex to RGB</a></li></ul></div><div class="flex flex-col gap-1.5 items-start"><div class="text-sm font-medium text-neutral-500">More tools</div><ul class="flex flex-col gap-1 items-start"><li class="group"><a class="whitespace-nowrap flex font-bold text-lg" href="/contrast-checker/">Contrast Checker</a></li><li class="group"><a class="whitespace-nowrap flex font-bold text-lg" href="/color-mixer/">Color Mixer</a></li></ul></div></div></div></li></ul></div></nav><header class="bg-neutral-100 pt-3 sm:pt-6 md:pt-8 px-5 sm:px-8 lg:px-0 pb-6 md:pb-8 lg:pb-16"><div class="grid grid-cols-12 gap-x-4 max-w-[71rem] mx-auto items-start"><div class="col-span-full sm:col-span-9 md:col-span-7 lg:col-span-8 grid grid-cols-subgrid md:mt-4 order-2 md:order-1"><div class="col-span-full flex items-center gap-x-2"><a class="font-medium text-xs sm:text-sm text-neutral-500 leading-none sm:leading-none" href="/">Color Codes</a></div><h1 class="font-bold text-5xl sm:text-6xl lg:text-7xl mt-1 sm:mt-2 lg:mt-3 col-span-full">Color Wheel</h1>
1<p class="font-medium mt-3 lg:mt-4 text-base sm:text-xl lg:text-2xl leading-[1.414] text-neutral-700 col-span-full lg:col-span-7">Create perfect color palettes with our color wheel. Start with a base color and find complementary, analogous, triadic and other schemes to elevate your designs.</p></div><div class="flex col-span-full md:col-span-4 md:col-start-9 flex-col items-center md:items-end mb-6 md:mb-0 order-1 md:order-2"><div class="relative overflow-hidden hidden md:block w-[300px] h-[250px]"><div class="flex items-center justify-center"><div><div class="" id="htmlcolorcodes_300x250_320x50_ATF"></div></div></div></div><div class="relative overflow-hidden md:hidden w-[320px] sm:w-[728px] h-[50px] sm:h-[90px]"><div class="flex items-center justify-center"><div><div class="" id="htmlcolorcodes_header"></div></div></div></div></div></div></header><main class="relative max-w-[76rem] mx-auto lg:-mt-8 px-5 sm:px-8 lg:px-0 pb-12 sm:pb-16 bg-white lg:rounded-xl lg:border lg:border-neutral-200 "><div class="flex items-center sm:gap-4 md:gap-6 h-12 sm:h-16 px-2 sm:px-4 lg:px-6 -mx-5 sm:-mx-8 lg:mx-0 border-b border-neutral-200 sticky top-0 bg-white rounded-t-xl z-50 animate-pulse"><div class="h-10 w-18 sm:h-10 sm:px-2 bg-neutral-200 rounded-full flex shrink-0"></div><div class="hidden sm:flex items-center gap-x-3"><span class="text-sm font-medium text-neutral-500 h-4 w-8 bg-neutral-200 rounded"></span><span class="font-medium h-5 w-20 bg-neutral-200 rounded"></span></div><div class="hidden md:flex items-center gap-x-3"><span class="text-sm font-medium text-neutral-500 h-4 w-8 bg-neutral-200 rounded"></span><span class="font-medium h-5 w-20 bg-neutral-200 rounded"></span></div><div class="hidden md:flex items-center gap-x-3"><span class="text-sm font-medium text-neutral-500 h-4 w-8 bg-neutral-200 rounded"></span><span class="font-medium h-5 w-20 bg-neutral-200 rounded"></span></div><div class="hidden lg:flex items-center gap-x-3"><span class="text-sm font-medium text-neutral-500 h-4 w-8 bg-neutral-200 rounded"></span><span class="font-medium h-5 w-20 bg-neutral-200 rounded"></span></div><div class="flex items-center sm:gap-2 ml-auto"><div class="relative flex ml-auto h-6 sm:h-8 overflow-hidden rounded-full bg-neutral-200 w-88"></div><div class="flex gap-2"><div class="h-9 w-9 bg-neutral-200 rounded-lg"></div><div class="h-9 w-9 bg-neutral-200 rounded-lg"></div></div></div></div><div class="grid grid-cols-12 gap-x-4 max-w-[71rem] mx-auto "><article class="col-span-full md:col-span-8"><section class="mt-6 sm:mt-8"><div class="flex items-center justify-center h-full bg-neutral-100"><h2>Loading...</h2></div></section><section class="mt-6 sm:mt-8"><div class="flex items-center sm:gap-4 md:gap-6 h-12 sm:h-16 px-2 sm:px-4 lg:px-6 -mx-5 sm:-mx-8 lg:mx-0 border-b border-neutral-200 sticky top-0 bg-white rounded-t-xl z-50 animate-pulse"><h2 class="text-2xl sm:text-3xl font-bold">Loading...</h2></div></section><section class="mt-6 sm:mt-8"><div class="rich-text"><h2 id="intro-to-color-theory">Intro to Color Theory</h2><p>Donât let the title scare you, color theory is rather fun, and our interactive color wheel makes it a breeze. Color theory lets us understand <b>how different colors work together</b>âthink of it as a cheat code for picking visually pleasing sets of colors.</p><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 sm:hidden"><img alt="Color Wheel: Color Harmonies (Small) [en]" loading="lazy" width="960" height="1600" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png?w=3840&q=60&auto=format,compress"/></figure><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 hidden sm:block">
1<img alt="Color Wheel: Color Harmonies (Large) [en]" loading="lazy" width="1920" height="1280" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/26tTkbCIMHSBtk1ULmWL71/0225ca7a41025f97de2dcae51731d09b/html-color-codes-color-wheel-color-harmonies--large.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/26tTkbCIMHSBtk1ULmWL71/0225ca7a41025f97de2dcae51731d09b/html-color-codes-color-wheel-color-harmonies--large.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/26tTkbCIMHSBtk1ULmWL71/0225ca7a41025f97de2dcae51731d09b/html-color-codes-color-wheel-color-harmonies--large.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/26tTkbCIMHSBtk1ULmWL71/0225ca7a41025f97de2dcae51731d09b/html-color-codes-color-wheel-color-harmonies--large.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/26tTkbCIMHSBtk1ULmWL71/0225ca7a41025f97de2dcae51731d09b/html-color-codes-color-wheel-color-harmonies--large.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/26tTkbCIMHSBtk1ULmWL71/0225ca7a41025f97de2dcae51731d09b/html-color-codes-color-wheel-color-harmonies--large.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/26tTkbCIMHSBtk1ULmWL71/0225ca7a41025f97de2dcae51731d09b/html-color-codes-color-wheel-color-harmonies--large.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/26tTkbCIMHSBtk1ULmWL71/0225ca7a41025f97de2dcae51731d09b/html-color-codes-color-wheel-color-harmonies--large.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/26tTkbCIMHSBtk1ULmWL71/0225ca7a41025f97de2dcae51731d09b/html-color-codes-color-wheel-color-harmonies--large.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/26tTkbCIMHSBtk1ULmWL71/0225ca7a41025f97de2dcae51731d09b/html-color-codes-color-wheel-color-harmonies--large.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/26tTkbCIMHSBtk1ULmWL71/0225ca7a41025f97de2dcae51731d09b/html-color-codes-color-wheel-color-harmonies--large.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/26tTkbCIMHSBtk1ULmWL71/0225ca7a41025f97de2dcae51731d09b/html-color-codes-color-wheel-color-harmonies--large.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/26tTkbCIMHSBtk1ULmWL71/0225ca7a41025f97de2dcae51731d09b/html-color-codes-color-wheel-color-harmonies--large.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/26tTkbCIMHSBtk1ULmWL71/0225ca7a41025f97de2dcae51731d09b/html-color-codes-color-wheel-color-harmonies--large.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/26tTkbCIMHSBtk1ULmWL71/0225ca7a41025f97de2dcae51731d09b/html-color-codes-color-wheel-color-harmonies--large.png?w=3840&q=60&auto=format,compress"/></figure><p>The color wheelâdating back to Isaac Newtonâs book â<a href="https://en.wikipedia.org/wiki/Opticks">Opticks</a>ââpresents color hues arranged in a circle, visually displaying the relationships between <b>primary, secondary and tertiary colors</b>.</p><p>When creating a design, finding colors that mesh well visually can be difficult for the untrained eye, and thatâs where <b>color harmonies</b>, or combinations of colors on the color wheel, come in handy.</p><h2 id="using-the-color-wheel">Using the Color Wheel</h2><p>So how do you generate these harmonies? Using an RGB color wheel like the one above makes it incredibly easyâget started by <b>selecting a harmony</b> from the dropdown.</p><p><b>Clicking and dragging</b> your cursor on any of the white circles (or anywhere on the color canvas) will change the hue; the further towards the center the more de-saturated the color.</p><p>Use the <b>lightness wheel</b> around the main color area to make your selected color lighter or darker; you can also paste in an initial hex color code to create harmonie
1s.</p><h2 id="color-harmonies">Color Harmonies</h2><p>Color harmonies are particularly pleasing combinations of <b>two or more colors</b> derived from their relationship on a color wheel. Also known as color chords, color harmonies are useful when exploring a possible color palette, or can be used as a standalone color scheme.</p><h3>Complementary colors</h3><p>Colors that are <b>directly opposite one another</b> on the color wheel are known as complementary colors. Complementary colors have a high contrast and can be very effective as accent colors when paired with a more neutral palette.</p><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 sm:hidden"><img alt="Color Wheel: Complementary Colors (Small) [en]" loading="lazy" width="960" height="1600" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png?w=3840&q=60&auto=format,compress"/></figure><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 hidden sm:block"><img alt="Color Wheel: Complementary Colors (Large) [en]" loading="lazy" width="1920" height="1280" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/2H6TEuMTV92EJwIDG2INgT/6f243183f8b05a790d3412b5d55ea1f7/html-color-codes-color-wheel-complementary--large.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/2H6TEuMTV92EJwIDG2INgT/6f243183f8b05a790d3412b5d55ea1f7/html-color-codes-color-wheel-complementary--large.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/2H6TEuMTV92EJwIDG2INgT/6f243183f8b05a790d3412b5d55ea1f7/html-color-codes-color-wheel-complementary--large.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/2H6TEuMTV92EJwIDG2INgT/6f243183f8b05a790d3412b5d55ea1f7/html-color-codes-color-wheel-complementary--large.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/2H6TEuMTV92EJwIDG2INgT/6f243183f8b05a790d3412b5d55ea1f7/html-color-codes-color-wheel-complementary--large.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/2H6TEuMTV92EJwIDG2INgT/6f243183f8b05a790d3412b5d55ea1f7/html-color-codes-color-wheel-complementary--large.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/2H6TEuMTV92EJwIDG2INgT/6f243183f8b05a790d3412b5d55ea1f7/html-color-codes-color-wheel-complementary--large.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/2H6TEuMTV92EJwIDG2INgT/6f243183f8b05a790d3412b5d55ea1f7/html-color-codes-color-wheel-complementary--large.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/2H6TEuMTV92EJwIDG2INgT/6f243183f8b05a790d3412b5d55ea1f7/html-color-codes-color-wheel-complementary--large.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/2H6TEuMTV92EJwIDG2INgT/6f243183f8b05a790d3412b5d55ea1f7/html-color-codes-color-wheel-complementary--large.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/2H6TEuMTV92EJwIDG2INgT/6f243183f8b05a790d3412b5d55ea1f7/html-color-codes-color-wheel-complementary--large.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/2H6TEuMTV92EJwIDG2INgT/6f243183f8b05a790d3412b5d55ea1f7/html-color-codes-color-wheel-complementary--large.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/2H6TEuMTV92EJwIDG2INgT/6f243183f8b05a790d3412b5d55ea1f7/html-color-codes-color-wheel-complementary--large.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/2H6TEuMTV92EJwIDG2INgT/6f243183f8b05a790d3412b5d55ea1f7/html-color-codes-color-wheel-complementary--large.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/2H6TEuMTV92EJwIDG2INgT/6f243183f8b05a790d3412b5d55ea1f7/html-color-codes-color-wheel-complementary--large.png?w=3840&q=60&auto=format,compress"/></figure><h3>Split-Complementary Colors</h3><p>A split-complementary harmony is made up of a <b>base color and the two adjacent colors</b> on either side of its complement. Split-complementary schemes are lower contrast and can be better for brand palettes.</p><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 sm:hidden"><img alt="Color Wheel: Split-Complementary Colors (Small) [en]" loading="lazy" width="960" height="1600" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png?w=3840&q=60&auto=format,compress"/></figure><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 hidden sm:block"><img alt="Color Wheel: Split-Complementary Colors (Large) [en]" loading="lazy" width="1920" height="1280" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/2Rom15YeaNtNv1V28AdDaw/e425a87174298fa6e31a7bc0d5f0a95b/html-color-codes-color-wheel-split-complementary--large.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/2Rom15YeaNtNv1V28AdDaw/e425a87174298fa6e31a7bc0d5f0a95b/html-color-codes-color-wheel-split-complementary--large.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/2Rom15YeaNtNv1V28AdDaw/e425a87174298fa6e31a7bc0d5f0a95b/html-color-codes-color-wheel-split-complementary--large.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/2Rom15YeaNtNv1V28AdDaw/e425a87174298fa6e31a7bc0d5f0a95b/html-color-codes-color-wheel-split-complementary--large.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/2Rom15YeaNtNv1V28AdDaw/e425a87174298fa6e31a7bc0d5f0a95b/html-color-codes-color-wheel-split-complementary--large.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/2Rom15YeaNtNv1V28AdDaw/e425a87174298fa6e31a7bc0d5f0a95b/html-color-codes-color-wheel-split-complementary--large.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/2Rom15YeaNtNv1V28AdDaw/e425a87174298fa6e31a7bc0d5f0a95b/html-color-codes-color-wheel-split-complementary--large.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/2Rom15YeaNtNv1V28AdDaw/e425a87174298fa6e31a7bc0d5f0a95b/html-color-codes-color-wheel-split-complementary--large.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/2Rom15YeaNtNv1V28AdDaw/e425a87174298fa6e31a7bc0d5f0a95b/html-color-codes-color-wheel-split-complementary--large.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/2Rom15YeaNtNv1V28AdDaw/e425a87174298fa6e31a7bc0d5f0a95b/html-color-codes-color-wheel-split-complementary--large.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/2Rom15YeaNtNv1V28AdDaw/e425a87174298fa6e31a7bc0d5f0a95b/html-color-codes-color-wheel-split-complementary--large.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/2Rom15YeaNtNv1V28AdDaw/e425a87174298fa6e31a7bc0d5f0a95b/html-color-codes-color-wheel-split-complementary--large.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/2Rom15YeaNtNv1V28AdDaw/e425a87174298fa6e31a7bc0d5f0a95b/html-color-codes-color-wheel-split-complementary--large.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/2Rom15YeaNtNv1V28AdDaw/e425a87174298fa6e31a7bc0d5f0a95b/html-color-codes-color-wheel-split-complementary--large.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/2Rom15YeaNtNv1V28AdDaw/e425a87174298fa6e31a7bc0d5f0a95b/html-color-codes-color-wheel-split-complementary--large.png?w=3840&q=60&auto=format,compress"/></figure><h3>Analogous Colors</h3><p>
1Analogous harmonies are created by selecting the <b>colors directly adjacent</b> to a chosen color. Frequently found in web design, analogous schemes, when paired with a complementary <a href="/contrast-checker/">color for contrast</a>, can offer great versatility.</p><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 sm:hidden"><img alt="Color Wheel: Analogous Colors (Small) [en]" loading="lazy" width="960" height="1600" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png?w=3840&q=60&auto=format,compress"/></figure><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 hidden sm:block"><img alt="Color Wheel: Analogous Colors (Large) [en]" loading="lazy" width="1920" height="1280" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/3J6BCThsMOvB0xZh5E1fSz/d89dbb7ed4b99d180aa0ae163dfb1d66/html-color-codes-color-wheel-analogous--large.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/3J6BCThsMOvB0xZh5E1fSz/d89dbb7ed4b99d180aa0ae163dfb1d66/html-color-codes-color-wheel-analogous--large.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/3J6BCThsMOvB0xZh5E1fSz/d89dbb7ed4b99d180aa0ae163dfb1d66/html-color-codes-color-wheel-analogous--large.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/3J6BCThsMOvB0xZh5E1fSz/d89dbb7ed4b99d180aa0ae163dfb1d66/html-color-codes-color-wheel-analogous--large.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/3J6BCThsMOvB0xZh5E1fSz/d89dbb7ed4b99d180aa0ae163dfb1d66/html-color-codes-color-wheel-analogous--large.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/3J6BCThsMOvB0xZh5E1fSz/d89dbb7ed4b99d180aa0ae163dfb1d66/html-color-codes-color-wheel-analogous--large.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/3J6BCThsMOvB0xZh5E1fSz/d89dbb7ed4b99d180aa0ae163dfb1d66/html-color-codes-color-wheel-analogous--large.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/3J6BCThsMOvB0xZh5E1fSz/d89dbb7ed4b99d180aa0ae163dfb1d66/html-color-codes-color-wheel-analogous--large.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/3J6BCThsMOvB0xZh5E1fSz/d89dbb7ed4b99d180aa0ae163dfb1d66/html-color-codes-color-wheel-analogous--large.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/3J6BCThsMOvB0xZh5E1fSz/d89dbb7ed4b99d180aa0ae163dfb1d66/html-color-codes-color-wheel-analogous--large.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/3J6BCThsMOvB0xZh5E1fSz/d89dbb7ed4b99d180aa0ae163dfb1d66/html-color-codes-color-wheel-analogous--large.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/3J6BCThsMOvB0xZh5E1fSz/d89dbb7ed4b99d180aa0ae163dfb1d66/html-color-codes-color-wheel-analogous--large.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/3J6BCThsMOvB0xZh5E1fSz/d89dbb7ed4b99d180aa0ae163dfb1d66/html-color-codes-color-wheel-analogous--large.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/3J6BCThsMOvB0xZh5E1fSz/d89dbb7ed4b99d180aa0ae163dfb1d66/html-color-codes-color-wheel-analogous--large.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/3J6BCThsMOvB0xZh5E1fSz/d89dbb7ed4b99d180aa0ae163dfb1d66/html-color-codes-color-wheel-analogous--large.png?w=3840&q=60&auto=format,compress"/></figure><h3>Triadic Colors</h3><p>
1Triadic harmonies consist of <b>three colors equidistant</b> from one another on the color wheel. Like complementary colors, triadic schemes tend to be very bright with a high contrast and work best when one color dominates.</p><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 sm:hidden"><img alt="Color Wheel: Triadic Colors (Small) [en]" loading="lazy" width="960" height="1600" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png?w=3840&q=60&auto=format,compress"/></figure><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 hidden sm:block"><img alt="Color Wheel: Triadic Colors (Large) [en]" loading="lazy" width="1920" height="1280" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/1P5z5fGoL6UtylVxf4ZBQz/9043318429883fc7ac63023983fb9e56/html-color-codes-color-wheel-triadic--large.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/1P5z5fGoL6UtylVxf4ZBQz/9043318429883fc7ac63023983fb9e56/html-color-codes-color-wheel-triadic--large.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/1P5z5fGoL6UtylVxf4ZBQz/9043318429883fc7ac63023983fb9e56/html-color-codes-color-wheel-triadic--large.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/1P5z5fGoL6UtylVxf4ZBQz/9043318429883fc7ac63023983fb9e56/html-color-codes-color-wheel-triadic--large.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/1P5z5fGoL6UtylVxf4ZBQz/9043318429883fc7ac63023983fb9e56/html-color-codes-color-wheel-triadic--large.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/1P5z5fGoL6UtylVxf4ZBQz/9043318429883fc7ac63023983fb9e56/html-color-codes-color-wheel-triadic--large.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/1P5z5fGoL6UtylVxf4ZBQz/9043318429883fc7ac63023983fb9e56/html-color-codes-color-wheel-triadic--large.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/1P5z5fGoL6UtylVxf4ZBQz/9043318429883fc7ac63023983fb9e56/html-color-codes-color-wheel-triadic--large.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/1P5z5fGoL6UtylVxf4ZBQz/9043318429883fc7ac63023983fb9e56/html-color-codes-color-wheel-triadic--large.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/1P5z5fGoL6UtylVxf4ZBQz/9043318429883fc7ac63023983fb9e56/html-color-codes-color-wheel-triadic--large.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/1P5z5fGoL6UtylVxf4ZBQz/9043318429883fc7ac63023983fb9e56/html-color-codes-color-wheel-triadic--large.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/1P5z5fGoL6UtylVxf4ZBQz/9043318429883fc7ac63023983fb9e56/html-color-codes-color-wheel-triadic--large.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/1P5z5fGoL6UtylVxf4ZBQz/9043318429883fc7ac63023983fb9e56/html-color-codes-color-wheel-triadic--large.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/1P5z5fGoL6UtylVxf4ZBQz/9043318429883fc7ac63023983fb9e56/html-color-codes-color-wheel-triadic--large.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/1P5z5fGoL6UtylVxf4ZBQz/9043318429883fc7ac63023983fb9e56/html-color-codes-color-wheel-triadic--large.png?w=3840&q=60&auto=format,compress"/></figure><h3>Tetradic Colors</h3><p>
1Tetradic color harmonies are formed by <b>two sets of complementary colors</b> 60 degrees apart on the color wheel. Tetradic schemes are an excellent starting point for creating color palettes; fine tune them using color shades, tints and tones.</p><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 sm:hidden"><img alt="Color Wheel: Tetradic Colors (Small) [en]" loading="lazy" width="960" height="1600" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png?w=3840&q=60&auto=format,compress"/></figure><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 hidden sm:block"><img alt="Color Wheel: Tetradic Colors (Large) [en]" loading="lazy" width="1920" height="1280" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/2A45xGZIE2yRQa8SqYStyK/98e8e8d375a4db6c0c2cef4cba7f5f4c/html-color-codes-color-wheel-tetradic--large.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/2A45xGZIE2yRQa8SqYStyK/98e8e8d375a4db6c0c2cef4cba7f5f4c/html-color-codes-color-wheel-tetradic--large.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/2A45xGZIE2yRQa8SqYStyK/98e8e8d375a4db6c0c2cef4cba7f5f4c/html-color-codes-color-wheel-tetradic--large.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/2A45xGZIE2yRQa8SqYStyK/98e8e8d375a4db6c0c2cef4cba7f5f4c/html-color-codes-color-wheel-tetradic--large.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/2A45xGZIE2yRQa8SqYStyK/98e8e8d375a4db6c0c2cef4cba7f5f4c/html-color-codes-color-wheel-tetradic--large.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/2A45xGZIE2yRQa8SqYStyK/98e8e8d375a4db6c0c2cef4cba7f5f4c/html-color-codes-color-wheel-tetradic--large.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/2A45xGZIE2yRQa8SqYStyK/98e8e8d375a4db6c0c2cef4cba7f5f4c/html-color-codes-color-wheel-tetradic--large.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/2A45xGZIE2yRQa8SqYStyK/98e8e8d375a4db6c0c2cef4cba7f5f4c/html-color-codes-color-wheel-tetradic--large.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/2A45xGZIE2yRQa8SqYStyK/98e8e8d375a4db6c0c2cef4cba7f5f4c/html-color-codes-color-wheel-tetradic--large.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/2A45xGZIE2yRQa8SqYStyK/98e8e8d375a4db6c0c2cef4cba7f5f4c/html-color-codes-color-wheel-tetradic--large.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/2A45xGZIE2yRQa8SqYStyK/98e8e8d375a4db6c0c2cef4cba7f5f4c/html-color-codes-color-wheel-tetradic--large.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/2A45xGZIE2yRQa8SqYStyK/98e8e8d375a4db6c0c2cef4cba7f5f4c/html-color-codes-color-wheel-tetradic--large.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/2A45xGZIE2yRQa8SqYStyK/98e8e8d375a4db6c0c2cef4cba7f5f4c/html-color-codes-color-wheel-tetradic--large.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/2A45xGZIE2yRQa8SqYStyK/98e8e8d375a4db6c0c2cef4cba7f5f4c/html-color-codes-color-wheel-tetradic--large.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/2A45xGZIE2yRQa8SqYStyK/98e8e8d375a4db6c0c2cef4cba7f5f4c/html-color-codes-color-wheel-tetradic--large.png?w=3840&q=60&auto=format,compress"/></figure><h3>Square Colors</h3><p>
1Similar to tetradic harmonies, square color schemes consist of <b>four colors, but set equidistant from one another</b> on the color wheel. Likewise square harmonies are great beginnings of a brand or website color palette.</p><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 sm:hidden"><img alt="Color Wheel: Square Colors (Small) [en]" loading="lazy" width="960" height="1600" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png?w=3840&q=60&auto=format,compress"/></figure><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 hidden sm:block"><img alt="Color Wheel: Square Colors (Large) [en]" loading="lazy" width="1920" height="1280" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/1d2kXzMISE5NlNK0s76M8y/47d98b6c4cb6ed3d32c218ebc5c0101b/html-color-codes-color-wheel-square--large.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/1d2kXzMISE5NlNK0s76M8y/47d98b6c4cb6ed3d32c218ebc5c0101b/html-color-codes-color-wheel-square--large.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/1d2kXzMISE5NlNK0s76M8y/47d98b6c4cb6ed3d32c218ebc5c0101b/html-color-codes-color-wheel-square--large.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/1d2kXzMISE5NlNK0s76M8y/47d98b6c4cb6ed3d32c218ebc5c0101b/html-color-codes-color-wheel-square--large.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/1d2kXzMISE5NlNK0s76M8y/47d98b6c4cb6ed3d32c218ebc5c0101b/html-color-codes-color-wheel-square--large.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/1d2kXzMISE5NlNK0s76M8y/47d98b6c4cb6ed3d32c218ebc5c0101b/html-color-codes-color-wheel-square--large.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/1d2kXzMISE5NlNK0s76M8y/47d98b6c4cb6ed3d32c218ebc5c0101b/html-color-codes-color-wheel-square--large.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/1d2kXzMISE5NlNK0s76M8y/47d98b6c4cb6ed3d32c218ebc5c0101b/html-color-codes-color-wheel-square--large.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/1d2kXzMISE5NlNK0s76M8y/47d98b6c4cb6ed3d32c218ebc5c0101b/html-color-codes-color-wheel-square--large.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/1d2kXzMISE5NlNK0s76M8y/47d98b6c4cb6ed3d32c218ebc5c0101b/html-color-codes-color-wheel-square--large.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/1d2kXzMISE5NlNK0s76M8y/47d98b6c4cb6ed3d32c218ebc5c0101b/html-color-codes-color-wheel-square--large.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/1d2kXzMISE5NlNK0s76M8y/47d98b6c4cb6ed3d32c218ebc5c0101b/html-color-codes-color-wheel-square--large.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/1d2kXzMISE5NlNK0s76M8y/47d98b6c4cb6ed3d32c218ebc5c0101b/html-color-codes-color-wheel-square--large.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/1d2kXzMISE5NlNK0s76M8y/47d98b6c4cb6ed3d32c218ebc5c0101b/html-color-codes-color-wheel-square--large.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/1d2kXzMISE5NlNK0s76M8y/47d98b6c4cb6ed3d32c218ebc5c0101b/html-color-codes-color-wheel-square--large.png?w=3840&q=60&auto=format,compress"/></figure><h2 id="color-shades-tints-and-tones">Color Shades, Tints and Tones</h2><p>Color shades, tints and tones are created by <b>adding black, white and gray</b> respectively to a chosen color. They can be very useful in web design for backgrounds and typography, and are often paired with a complementary color for contrast.</p><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 sm:hidden"><img alt="Color Wheel: Color Shades, Tints and Tones (Small) [en]" loading="lazy" width="960" height="1600" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png?w=3840&q=60&auto=format,compress"/></figure><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 hidden sm:block"><img alt="Color Wheel: Color Shades, Tints and Tones (Large) [en]" loading="lazy" width="1920" height="1280" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/4qAMy0XxT7bfs7gaGeNOdy/65911fde33219bd98628ed3077c21ef6/html-color-codes-color-wheel-shades-tints-tones--large.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/4qAMy0XxT7bfs7gaGeNOdy/65911fde33219bd98628ed3077c21ef6/html-color-codes-color-wheel-shades-tints-tones--large.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/4qAMy0XxT7bfs7gaGeNOdy/65911fde33219bd98628ed3077c21ef6/html-color-codes-color-wheel-shades-tints-tones--large.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/4qAMy0XxT7bfs7gaGeNOdy/65911fde33219bd98628ed3077c21ef6/html-color-codes-color-wheel-shades-tints-tones--large.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/4qAMy0XxT7bfs7gaGeNOdy/65911fde33219bd98628ed3077c21ef6/html-color-codes-color-wheel-shades-tints-tones--large.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/4qAMy0XxT7bfs7gaGeNOdy/65911fde33219bd98628ed3077c21ef6/html-color-codes-color-wheel-shades-tints-tones--large.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/4qAMy0XxT7bfs7gaGeNOdy/65911fde33219bd98628ed3077c21ef6/html-color-codes-color-wheel-shades-tints-tones--large.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/4qAMy0XxT7bfs7gaGeNOdy/65911fde33219bd98628ed3077c21ef6/html-color-codes-color-wheel-shades-tints-tones--large.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/4qAMy0XxT7bfs7gaGeNOdy/65911fde33219bd98628ed3077c21ef6/html-color-codes-color-wheel-shades-tints-tones--large.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/4qAMy0XxT7bfs7gaGeNOdy/65911fde33219bd98628ed3077c21ef6/html-color-codes-color-wheel-shades-tints-tones--large.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/4qAMy0XxT7bfs7gaGeNOdy/65911fde33219bd98628ed3077c21ef6/html-color-codes-color-wheel-shades-tints-tones--large.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/4qAMy0XxT7bfs7gaGeNOdy/65911fde33219bd98628ed3077c21ef6/html-color-codes-color-wheel-shades-tints-tones--large.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/4qAMy0XxT7bfs7gaGeNOdy/65911fde33219bd98628ed3077c21ef6/html-color-codes-color-wheel-shades-tints-tones--large.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/4qAMy0XxT7bfs7gaGeNOdy/65911fde33219bd98628ed3077c21ef6/html-color-codes-color-wheel-shades-tints-tones--large.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/4qAMy0XxT7bfs7gaGeNOdy/65911fde33219bd98628ed3077c21ef6/html-color-codes-color-wheel-shades-tints-tones--large.png?w=3840&q=60&auto=format,compress"/></figure><h3>Color Shades</h3><p><b>Adding black</b> in varying levels to a color produces gradually darker variants, or âshades,â of that particular color. Shades work well for link hover effects, or as footer and header backgrounds.</p><h3>Color Tints</h3><p>Color tints are made by <b>adding white to a color</b>, resulting in increasingly lighter versions. Tints can also be used for <a href="/blog/css-link-color/">CSS hover effects</a>, and perform nicely as modal backgrounds.</p><h3>Color Tones</h3><p>Tones are created by <b>adding gray to a color</b>, and produces an almost endless variety of colors depending on what level of gray is used. Less common in web design, tones could be useful for typographic elements like comments, quotes or highlights.</p><h2 id="primary-secondary-and-tertiary-colors">Primary, Secondary and Tertiary Colors</h2><p>The color wheel is made up of 12 distinct colors, which are subsequently divided into the following three groups: <b>primary colors</b> (3), <b>secondary colors</b> (3) and <b>tertiary colors</b> (6).</p><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 sm:hidden"><img alt="Color Wheel: Primary, Secondary and Tertiary Colors (Small) [en]" loading="lazy" width="960" height="1600" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-cod
1es-color-wheel-primary-secondary-tertiary--small.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png?w=3840&q=60&auto=format,compress"/></figure><figure class="w-full h-auto mt-7 mb-6 border border-neutral-200 rounded-xl bg-white p-4 sm:p-6 hidden sm:block"><img alt="Color Wheel: Primary, Secondary and Tertiary Colors (Large) [en]" loading="lazy" width="1920" height="1280" decoding="async" data-nimg="1" class="block w-full h-auto" style="color:transparent" sizes="(min-width: 1024px) 621px, 100vw" srcSet="https://colorcodes.imgix.net/6ZuNxOQOQxVXyubbQdm8s3/dc47e468ad814cc17d50c3118d326646/html-color-codes-color-wheel-primary-secondary-tertiary--large.png?w=640&q=60&auto=format,compress 640w, https://colorcodes.imgix.net/6ZuNxOQOQxVXyubbQdm8s3/dc47e468ad814cc17d50c3118d326646/html-color-codes-color-wheel-primary-secondary-tertiary--large.png?w=750&q=60&auto=format,compress 750w, https://colorcodes.imgix.net/6ZuNxOQOQxVXyubbQdm8s3/dc47e468ad814cc17d50c3118d326646/html-color-codes-color-wheel-primary-secondary-tertiary--large.png?w=768&q=60&auto=format,compress 768w, https://colorcodes.imgix.net/6ZuNxOQOQxVXyubbQdm8s3/dc47e468ad814cc17d50c3118d326646/html-color-codes-color-wheel-primary-secondary-tertiary--large.png?w=828&q=60&auto=format,compress 828w, https://colorcodes.imgix.net/6ZuNxOQOQxVXyubbQdm8s3/dc47e468ad814cc17d50c3118d326646/html-color-codes-color-wheel-primary-secondary-tertiary--large.png?w=1080&q=60&auto=format,compress 1080w, https://colorcodes.imgix.net/6ZuNxOQOQxVXyubbQdm8s3/dc47e468ad814cc17d50c3118d326646/html-color-codes-color-wheel-primary-secondary-tertiary--large.png?w=1200&q=60&auto=format,compress 1200w, https://colorcodes.imgix.net/6ZuNxOQOQxVXyubbQdm8s3/dc47e468ad814cc17d50c3118d326646/html-color-codes-color-wheel-primary-secondary-tertiary--large.png?w=1280&q=60&auto=format,compress 1280w, https://colorcodes.imgix.net/6ZuNxOQOQxVXyubbQdm8s3/dc47e468ad814cc17d50c3118d326646/html-color-codes-color-wheel-primary-secondary-tertiary--large.png?w=1366&q=60&auto=format,compress 1366w, https://colorcodes.imgix.net/6ZuNxOQOQxVXyubbQdm8s3/dc47e468ad814cc17d50c3118d326646/html-color-codes-color-wheel-primary-secondary-tertiary--large.png?w=1440&q=60&auto=format,compress 1440w, https://colorcodes.imgix.net/6ZuNxOQOQxVXyubbQdm8s3/dc47e468ad814cc17d50c3118d326646/html-color-codes-color-wheel-primary-secondary-tertiary--large.png?w=1680&q=60&auto=format,compress 1680w, https://colorcodes.imgix.net/6ZuNxOQOQxVXyubbQdm8s3/dc47e468ad814cc17d50c3118d326646/html-color-codes-color-wheel-primary-secondary-tertiary--large.png?w=1920&q=60&auto=format,compress 1920w, https://colorcodes.imgix.net/6ZuNxOQOQxVXyubbQdm8s3/dc47e468ad814cc17d50c3118d326646/html-color-codes-color-wheel-primary-secondary-tertiary--large.png?w=2048&q=60&auto=format,compress 2048w, https://colorcodes.imgix.net/6ZuNxOQOQxVXyubbQdm8s3/dc47e468ad814cc17d50c3118d326646/html-color-codes-color-wheel-primary-secondary-tertiary--large.png?w=2560&q=60&auto=format,compress 2560w, https://colorcodes.imgix.net/6ZuNxOQOQxVXyubbQdm8s3/dc47e468ad814cc17d50c3118d326646/html-color-codes-color-wheel-primary-secondary-tertiary--large.png?w=3840&q=60&auto=format,compress 3840w" src="https://colorcodes.imgix.net/6ZuNxOQOQxVXyubbQdm8s3/dc47e468ad814cc17d50c3118d326646/html-color-codes-color-wheel-primary-secondary-tertiary--large.png?w=3840&q=60&auto=format,compress"/></figure><ul><li><p><b>Primary colors</b>: red, yellow and blue. These are the base colors of the wheel, and every other color contains at least one of the primary colors.</p></li><li><p><b>Secondary colors</b>: orange, green and purple. Secondary colors are made by mixing two of the primary colors together (i.e. red and yellow to make orange).</p></li><li><p><b>Tertiary colors</b>: vermilion (red-orange), amber (yellow-orange), chartreuse (yellow-green), teal (blue-green), violet (blue-purple) and magenta (red-purple). Tertiary colors are the result of mixing a primary and a secondary color.</p></li></ul><h2 id="creating-your-color-scheme">Creating Your Color Scheme</h2><p>Armed with the power of the color wheel, creating your own color palette should be far easier than starting from scratch. But if youâre still at a loss, perhaps one of our other tools might suffice.</p><p>
1Have an image youâd like extract a palette from? Try our <a href="/image-color-picker/">image color picker</a> instead. Or maybe you just need a regular old <a href="/color-picker/">color picker</a>? And be sure to checkout our <a href="/colors/">color library</a> for additional inspiration.</p></div></section></article><aside class="hidden md:flex col-span-4 col-start-9 row-span-full flex-col gap-8 mt-8 items-end"><div class="w-[300px] h-[600px]"><div class="flex items-center justify-center"><div><div class="" id="htmlcolorcodes_300x250_320x50_300x600_160x600_1"></div></div></div></div><div class="w-[300px] h-[600px]"><div class="flex items-center justify-center"><div><div class="" id="htmlcolorcodes_300x250_320x50_300x600_160x600_2"></div></div></div></div><div class="w-[300px] h-[600px]"><div class="flex items-center justify-center"><div><div class="" id="htmlcolorcodes_300x250_320x50_300x600_160x600_3"></div></div></div></div><div class="w-[300px] h-[600px]"><div class="flex items-center justify-center"><div><div class="" id="htmlcolorcodes_300x250_320x50_300x600_160x600_4"></div></div></div></div><div class="w-[300px] h-[600px] sticky top-24"><div class="flex items-center justify-center"><div><div class="" id="htmlcolorcodes_300x250_320x50_300x600_160x600_5"></div></div></div></div></aside></div></main><footer><div class="py-6 sm:py-8 px-5 sm:px-8 lg:px-0"><div class="grid grid-cols-12 gap-x-4 max-w-[71rem] mx-auto items-center"><div class="hidden sm:block col-span-1"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M30.7819 9.87827C29.9779 7.93706 28.7993 6.17324 27.3136 4.6875L20.2432 11.7579C21.3286 12.8436 22 14.3434 22 16C22 16.0004 22 16.0008 22 16.0012H31.9999C31.9999 13.9001 31.586 11.8195 30.7819 9.87827Z" fill="#C11007"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M20.241 20.2441C19.1553 21.329 17.656 21.9998 16 21.9998C15.9997 21.9998 15.9993 21.9998 15.999 21.9998V32.0022C18.1002 32.0022 20.1807 31.5883 22.122 30.7843C24.0632 29.9802 25.827 28.8016 27.3127 27.3159L20.241 20.2441Z" fill="#861043"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M20.2412 20.2431L27.3138 27.3157C28.7995 25.8299 29.978 24.0661 30.7821 22.1249C31.5862 20.1837 32.0001 18.1031 32.0001 16.002H21.999C21.9985 17.6583 21.3268 19.1577 20.2412 20.2431Z" fill="#A50C36"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M8.45766 30.1107C10.7782 31.3511 13.3688 32 16 32L16 22C12.6863 22 10 19.3137 10 16C10 12.6863 12.6863 10 16 10C17.6569 10 19.1569 10.6716 20.2426 11.7574L27.3137 4.68629C25.4532 2.82574 23.1625 1.45276 20.6446 0.688956C18.1266 -0.074846 15.4592 -0.205888 12.8786 0.307437C10.2979 0.820761 7.88367 1.96261 5.84971 3.63183C3.81575 5.30106 2.22485 7.44614 1.21793 9.87707C0.211009 12.308 -0.180856 14.9497 0.0770484 17.5683C0.334953 20.1868 1.23466 22.7013 2.69649 24.8891C4.15832 27.0769 6.13713 28.8704 8.45766 30.1107Z" fill="#F54927"></path></svg></div><div class="col-span-8 sm:col-span-8 sm:col-start-2 md:col-span-9 md:col-start-2"><nav aria-label="breadcrumb" data-slot="breadcrumb"><ol data-slot="breadcrumb-list" class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5"><li data-slot="breadcrumb-item" class="inline-flex items-center gap-1.5"><a data-slot="breadcrumb-link" class="hover:text-foreground transition-colors font-medium" href="/"><span class="hidden sm:inline-flex">HTML Color Codes</span><span class="flex sm:hidden size-5 [&_svg]:size-5"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M30.7819 9.87827C29.9779 7.93706 28.7993 6.17324 27.3136 4.6875L20.2432 11.7579C21.3286 12.8436 22 14.3434 22 16C22 16.0004 22 16.0008 22 16.0012H31.9999C31.9999 13.9001 31.586 11.8195 30.7819 9.87827Z" fill="#C11007"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M20.241 20.2441C19.1553 21.329 17.656 21.9998 16 21.9998C15.9997 21.9998 15.9993 21.9998 15.999 21.9998V32.0022C18.1002 32.0022 20.1807 31.5883 22.122 30.7843C24.0632 29.9802 25.827 28.8016 27.3127 27.3159L20.241 20.2441Z" fill="#861043"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M20.2412 20.2431L27.3138 27.3157C28.7995 25.8299 29.978 24.0661 30.7821 22.1249C31.5862 20.1837 32.0001 18.1031 32.0001 16.002H21.999C21.9985 17.6583 21.3268 19.1577 20.2412 20.2431Z" fill="#A50C36"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M8.45766 30.1107C10.7782 31.3511 13.3688 32 16 32L16 22C12.6863 22 10 19.3137 10 16C10 12.6863 12.6863 10 16 10C17.6569 10 19.1569 10.6716 20.2426 11.7574L27.3137 4.68629C25.4532 2.82574 23.1625 1.45276 20.6446 0.688956C18.1266 -0.074846 15.4592 -0.205888 12.8786 0.307437C10.2979 0.820761 7.88367 1.96261 5.84971 3.63183C3.81575 5.30106 2.22485 7.44614 1.21793 9.87707C0.211009 12.308 -0.180856 14.9497 0.0770484 17.5683C0.334953 20.1868 1.23466 22.7013 2.69649 24.8891C4.15832 27.0769 6.13713 28.8704 8.45766 30.1107Z" fill="#F54927"></path></svg></span></a></li><li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class="[&>svg]:size-3.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right"><path d="m9 18 6-6-6-6"></path></svg></li><li data-slot="breadcrumb-item" class="inline-flex items-center gap-1.5"><span data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" class="text-foreground font-medium">Color Wheel</span></li></ol></nav></div><div class="col-span-4 sm:col-span-3 sm:col-start-10 md:col-span-2 md:col-start-11"><button class="flex items-center justify-between gap-2 whitespace-nowrap font-medium ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 cursor-pointer focus-visible:outline-border-a11y focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:ring-ring-a11y focus-visible:ring-2 bg-white border border-input h-8 px-3.5 rounded-md text-sm placeholder:text-sm w-full" t
1ype="button" role="combobox" aria-controls="radix-:R1ljrmlb:" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span style="pointer-events:none">English</span><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="text-neutral-500 size-3.5" aria-hidden="true"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div></div><div class="bg-neutral-100 pt-6 sm:pt-8 pb-24 sm:pb-32 px-5 sm:px-8 lg:px-0"><div class="grid grid-cols-12 gap-x-4 max-w-[71rem] mx-auto gap-y-6 sm:gap-y-8 md:gap-y-4"><div class="hidden md:flex col-span-full md:col-span-1 row-span-full flex-col gap-2 text-neutral-500"><a class="w-8 h-8 bg-neutral-100 rounded-md flex items-center justify-center hover:bg-neutral-200 transition-colors" href="https://x.com/share?url=https://htmlcolorcodes.com/hex-to-rgb/&text=HTML%20Color%20Codes%20â%20the%20best%20color%20tool%20on%20the%20web!%20by%20@dixonandmoe%20%23colorful%20%23useful"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M214.75,211.71l-62.6-98.38,61.77-67.95a8,8,0,0,0-11.84-10.76L143.24,99.34,102.75,35.71A8,8,0,0,0,96,32H48a8,8,0,0,0-6.75,12.3l62.6,98.37-61.77,68a8,8,0,1,0,11.84,10.76l58.84-64.72,40.49,63.63A8,8,0,0,0,160,224h48a8,8,0,0,0,6.75-12.29ZM164.39,208,62.57,48h29L193.43,208Z"></path></svg></a><a class="w-8 h-8 bg-neutral-100 rounded-md flex items-center justify-center hover:bg-neutral-200 transition-colors" href="https://www.facebook.com/sharer/sharer.php?u=https://htmlcolorcodes.com/hex-to-rgb/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z"></path></svg></a><a class="w-8 h-8 bg-neutral-100 rounded-md flex items-center justify-center hover:bg-neutral-200 transition-colors" href="https://www.linkedin.com/sharing/share-offsite/?url={url}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,24H40A16,16,0,0,0,24,40V216a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V40A16,16,0,0,0,216,24Zm0,192H40V40H216V216ZM96,112v64a8,8,0,0,1-16,0V112a8,8,0,0,1,16,0Zm88,28v36a8,8,0,0,1-16,0V140a20,20,0,0,0-40,0v36a8,8,0,0,1-16,0V112a8,8,0,0,1,15.79-1.78A36,36,0,0,1,184,140ZM100,84A12,12,0,1,1,88,72,12,12,0,0,1,100,84Z"></path></svg></a></div><div class="col-span-full sm:col-span-7 sm:col-start-1 md:col-span-6 md:col-start-2 flex flex-col gap-2"><div class="text-sm text-neutral-500 font-medium">Credit</div><a href="https://dixonandmoe.com" class="w-fit text-3xl sm:text-5xl font-bold">Dixon & Moe</a><p class="text-sm font-medium text-neutral-700 flex gap-2"><span>© 2015â<!-- -->2025</span><a class="underline" href="/privacy-policy/">Privacy Policy</a><button id="pmLink">Privacy Manager</button></p></div><div class="order-2 sm:order-1 col-span-6 sm:col-span-2 sm:col-start-9 flex flex-col gap-3"><div class="text-sm text-neutral-500 font-medium">Contact</div><a href="mailto:[email protected]" class="w-fit text-lg leading-none font-medium text-sm">Email</a></div><div class="order-3 sm:order-2 col-span-6 sm:col-span-2 sm:col-start-11 flex flex-col gap-3"><div class="text-sm text-neutral-500 font-medium">Socialize</div><a href="https://www.facebook.com/htmlcolorcodez" class="w-fit text-lg leading-none font-medium text-sm">Facebook</a><a href="https://codepen.io/htmlcolorcodes/" class="w-fit text-lg leading-none font-medium text-sm">Codepen</a></div><div class="order-1 sm:order-3 col-span-full sm:col-span-7 sm:col-start-1 md:col-span-6 md:col-start-2 flex flex-col gap-2"><div class="text-sm text-neutral-500 font-medium">About</div><p class="text-base md:text-lg font-medium text-neutral-700">
1We built HTML Color Codes because we believe tools for design should be well designed themselves. If you like the site or have a suggestion, <a href="mailto:[email protected]" class="underline decoration-neutral-300 hover:decoration-neutral-700">drop us a line</a>; feedback is very much appreciated and always welcome!</p></div><div class="order-4 sm:order-4 col-span-6 sm:col-span-2 sm:col-start-9 flex flex-col gap-3"><div class="text-sm text-neutral-500 font-medium">Partner Sites</div><a href="https://loremipsum.io" class="w-fit text-lg leading-none font-medium text-sm">Lorem Ipsum</a><a href="https://wordcounter.io" class="w-fit text-lg leading-none font-medium text-sm">Word Counter</a><a href="https://glyphy.io" class="w-fit text-lg leading-none font-medium text-sm">Glyphy</a></div><div class="order-5 sm:order-5 col-span-6 sm:col-span-2 sm:col-start-11 flex flex-col gap-3"><div class="text-sm text-neutral-500 font-medium">Colophon</div><a href="https://displaay.net/typeface/avantt/" class="w-fit text-lg leading-none font-medium text-sm">Avantt</a><a href="https://colord.omgovich.ru/" class="w-fit text-lg leading-none font-medium text-sm">Colord</a></div></div></div></footer><!--$--><!--/$--><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section>
1<script src="/_next/static/chunks/webpack-791713dca881368f.js" async=""></script>
1<script>(self.__next_f=self.__next_f||[]).push([0])</script>
1<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[56,[\"445\",\"static/chunks/445-2edaf82f81c27c2f.js\",\"493\",\"static/chunks/493-9059d463e843d1b0.js\",\"233\",\"static/chunks/app/(tools)/color-wheel/page-9a9f0ff4545d2277.js\"],\"default\"]\n3:I[15244,[],\"\"]\n4:I[43866,[],\"\"]\n5:\"$Sreact.suspense\"\n6:I[88646,[\"445\",\"static/chunks/445-2edaf82f81c27c2f.js\",\"493\",\"static/chunks/493-9059d463e843d1b0.js\",\"233\",\"static/chunks/app/(tools)/color-wheel/page-9a9f0ff4545d2277.js\"],\"default\"]\n7:I[34010,[\"445\",\"static/chunks/445-2edaf82f81c27c2f.js\",\"493\",\"static/chunks/493-9059d463e843d1b0.js\",\"974\",\"static/chunks/app/page-813de729857d1533.js\"],\"Toaster\"]\n8:I[53704,[\"445\",\"static/chunks/445-2edaf82f81c27c2f.js\",\"31\",\"static/chunks/31-7af81ebcaf37244a.js\",\"493\",\"static/chunks/493-9059d463e843d1b0.js\",\"177\",\"static/chunks/app/layout-4b98a1f728d04f33.js\"],\"\"]\na:I[86213,[],\"OutletBoundary\"]\nd:I[86213,[],\"ViewportBoundary\"]\nf:I[86213,[],\"MetadataBoundary\"]\n11:I[34835,[],\"\"]\n:HL[\"/_next/static/media/570bdcfc936308af-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/68c5787607b6894a-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/af89c8d08109c709.css\",\"style\"]\n"])</script>
1<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"TG7L1u-i-SLf1n8edTJK2\",\"p\":\"\",\"c\":[\"\",\"color-wheel\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"(tools)\",{\"children\":[\"color-wheel\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/af89c8d08109c709.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://a.pub.network/\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://b.pub.network/\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://c.pub.network/\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://d.pub.network/\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://c.amazon-adsystem.com\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://s.amazon-adsystem.com\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://btloader.com/\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://api.btloader.com/\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://cdn.confiant-integrations.net\",\"crossOrigin\":\"anonymous\"}]]}],[\"$\",\"body\",null,{\"className\":\"__variable_0cacfd font-sans antialiased bg-neutral-50\",\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"$undefined\",[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"$5\",null,{\"children\":[\"$\",\"$L6\",null,{}]}],[\"$\",\"$L7\",null,{}],[\"$\",\"$L8\",null,{\"strategy\":\"afterInteractive\",\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-0TQX8EDTM8\"}],[\"$\",\"$L8\",null,{\"strategy\":\"afterInteractive\",\"id\":\"gtag-init\",\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag(){dataLayer.push(arguments);}\\n gtag('js', new Date());\\n gtag('config', 'G-0TQX8EDTM8');\\n \"}]]}]]}]]}],{\"children\":[\"(tools)\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:children:1:props:children:1:props:notFound:0:1:props:style\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$0:f:0:1:1:props:children:1:props:children:1:props:children:1:props:notFound:0:1:props:children:props:children:1:props:style\",\"children\":404}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:children:1:props:children:1:props:notFound:0:1:props:children:props:children:2:props:style\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:children:1:props:children:1:props:notFound:0:1:props:children:props:children:2:props:children:props:style\",\"children\":\"This page could not be found.\"}]}]]}]}]],\"$undefined\",[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"color-wheel\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$L9\",\"$undefined\",null,[\"$\",\"$La\",null,{\"children\":[\"$Lb\",\"$Lc\",null]}]]}],{}
1,null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"Xhf9rNU4S3wy8wfqfa0lz\",{\"children\":[[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],[\"$\",\"$Lf\",null,{\"children\":\"$L10\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$11\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script>
1<script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\nb:null\n"])</script>
1<script>self.__next_f.push([1,"12:I[52741,[\"445\",\"static/chunks/445-2edaf82f81c27c2f.js\",\"493\",\"static/chunks/493-9059d463e843d1b0.js\",\"233\",\"static/chunks/app/(tools)/color-wheel/page-9a9f0ff4545d2277.js\"],\"ToolsColorProvider\"]\n13:I[48173,[\"445\",\"static/chunks/445-2edaf82f81c27c2f.js\",\"493\",\"static/chunks/493-9059d463e843d1b0.js\",\"233\",\"static/chunks/app/(tools)/color-wheel/page-9a9f0ff4545d2277.js\"],\"\"]\n14:I[44392,[\"445\",\"static/chunks/445-2edaf82f81c27c2f.js\",\"493\",\"static/chunks/493-9059d463e843d1b0.js\",\"233\",\"static/chunks/app/(tools)/color-wheel/page-9a9f0ff4545d2277.js\"],\"default\"]\n15:I[13783,[\"445\",\"static/chunks/445-2edaf82f81c27c2f.js\",\"493\",\"static/chunks/493-9059d463e843d1b0.js\",\"233\",\"static/chunks/app/(tools)/color-wheel/page-9a9f0ff4545d2277.js\"],\"default\"]\n16:I[47485,[\"445\",\"static/chunks/445-2edaf82f81c27c2f.js\",\"493\",\"static/chunks/493-9059d463e843d1b0.js\",\"233\",\"static/chunks/app/(tools)/color-wheel/page-9a9f0ff4545d2277.js\"],\"default\"]\n17:I[24389,[\"445\",\"static/chunks/445-2edaf82f81c27c2f.js\",\"493\",\"static/chunks/493-9059d463e843d1b0.js\",\"233\",\"static/chunks/app/(tools)/color-wheel/page-9a9f0ff4545d2277.js\"],\"default\"]\n18:I[19067,[\"445\",\"static/chunks/445-2edaf82f81c27c2f.js\",\"493\",\"static/chunks/493-9059d463e843d1b0.js\",\"233\",\"static/chunks/app/(tools)/color-wheel/page-9a9f0ff4545d2277.js\"],\"default\"]\n19:I[88311,[\"445\",\"static/chunks/445-2edaf82f81c27c2f.js\",\"493\",\"static/chunks/493-9059d463e843d1b0.js\",\"233\",\"static/chunks/app/(tools)/color-wheel/page-9a9f0ff4545d2277.js\"],\"default\"]\n23:I[62326,[\"445\",\"static/chunks/445-2edaf82f81c27c2f.js\",\"493\",\"static/chunks/493-9059d463e843d1b0.js\",\"233\",\"static/chunks/app/(tools)/color-wheel/page-9a9f0ff4545d2277.js\"],\"default\"]\n24:I[68183,[\"445\",\"static/chunks/445-2edaf82f81c27c2f.js\",\"493\",\"static/chunks/493-9059d463e843d1b0.js\",\"233\",\"static/chunks/app/(tools)/color-wheel/page-9a9f0ff4545d2277.js\"],\"default\"]\n25:I[65535,[\"445\",\"static/chunks/445-2edaf82f81c27c2f.js\",\"493\",\"static/chunks/493-9059d463e843d1b0.js\",\"233\",\"static/chunks/app/(tools)/color-wheel/page-9a9f0ff4545d2277.js\""])</script>
1<script>self.__next_f.push([1,"],\"default\"]\n"])</script>
1<script>self.__next_f.push([1,"9:[\"$\",\"$L12\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"bg-neutral-100 pt-3 sm:pt-6 md:pt-8 px-5 sm:px-8 lg:px-0 pb-6 md:pb-8 lg:pb-16\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid grid-cols-12 gap-x-4 max-w-[71rem] mx-auto items-start\",\"children\":[[\"$\",\"div\",null,{\"className\":\"col-span-full sm:col-span-9 md:col-span-7 lg:col-span-8 grid grid-cols-subgrid md:mt-4 order-2 md:order-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"col-span-full flex items-center gap-x-2\",\"children\":[\"$\",\"$L13\",null,{\"className\":\"font-medium text-xs sm:text-sm text-neutral-500 leading-none sm:leading-none\",\"href\":\"/\",\"children\":\"Color Codes\"}]}],[\"$\",\"h1\",null,{\"className\":\"font-bold text-5xl sm:text-6xl lg:text-7xl mt-1 sm:mt-2 lg:mt-3 col-span-full\",\"children\":\"Color Wheel\"}],[\"$\",\"p\",null,{\"className\":\"font-medium mt-3 lg:mt-4 text-base sm:text-xl lg:text-2xl leading-[1.414] text-neutral-700 col-span-full lg:col-span-7\",\"children\":\"Create perfect color palettes with our color wheel. Start with a base color and find complementary, analogous, triadic and other schemes to elevate your designs.\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex col-span-full md:col-span-4 md:col-start-9 flex-col items-center md:items-end mb-6 md:mb-0 order-1 md:order-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden hidden md:block w-[300px] h-[250px]\",\"children\":[\"$\",\"$L14\",null,{}]}],[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden md:hidden w-[320px] sm:w-[728px] h-[50px] sm:h-[90px]\",\"children\":[\"$\",\"$L15\",null,{}]}]]}]]}],\"$undefined\"]}],[\"$\",\"main\",null,{\"className\":\"relative max-w-[76rem] mx-auto lg:-mt-8 px-5 sm:px-8 lg:px-0 pb-12 sm:pb-16 bg-white lg:rounded-xl lg:border lg:border-neutral-200 \",\"children\":[[\"$\",\"$L16\",null,{}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-12 gap-x-4 max-w-[71rem] mx-auto \",\"children\":[[\"$\",\"article\",null,{\"className\":\"col-span-full md:col-span-8\",\"children\":[[\"$\",\"section\",null,{\"className\":\"mt-6 sm:mt-8\",\"children\":[\"$\",\"$L17\",null,{\"children\":[\"$\",\"$L18\",null,{}]}]}],[\"$\",\"section\",null,{\"className\":\"mt-6 sm:mt-8\",\"children\":[\"$\",\"$L19\",null,{}]}],[\"$\",\"section\",null,{\"className\":\"mt-6 sm:mt-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"rich-text\",\"children\":[[\"$\",\"h2\",\"0\",{\"id\":\"intro-to-color-theory\",\"children\":[\"Intro to Color Theory\"]}],[\"$\",\"p\",\"1\",{\"children\":[\"Donât let the title scare you, color theory is rather fun, and our interactive color wheel makes it a breeze. Color theory lets us understand \",[\"$\",\"b\",\"1\",{\"children\":\"how different colors work together\"}],\"âthink of it as a cheat code for picking visually pleasing sets of colors.\"]}],\"$L1a\",[\"$\",\"p\",\"3\",{\"children\":[\"The color wheelâdating back to Isaac Newtonâs book â\",[\"$\",\"a\",\"1\",{\"href\":\"https://en.wikipedia.org/wiki/Opticks\",\"children\":[\"Opticks\"]}],\"ââpresents color hues arranged in a circle, visually displaying the relationships between \",[\"$\",\"b\",\"3\",{\"children\":\"primary, secondary and tertiary colors\"}],\".\"]}],[\"$\",\"p\",\"4\",{\"children\":[\"When creating a design, finding colors that mesh well visually can be difficult for the untrained eye, and thatâs where \",[\"$\",\"b\",\"1\",{\"children\":\"color harmonies\"}],\", or combinations of colors on the color wheel, come in handy.\"]}],[\"$\",\"h2\",\"5\",{\"id\":\"using-the-color-wheel\",\"children\":[\"Using the Color Wheel\"]}],[\"$\",\"p\",\"6\",{\"children\":[\"So how do you generate these harmonies? Using an RGB color wheel like the one above makes it incredibly easyâget started by \",[\"$\",\"b\",\"1\",{\"children\":\"selecting a harmony\"}],\" from the dropdown.\"]}],[\"$\",\"p\",\"7\",{\"children\":[[\"$\",\"b\",\"0\",{\"children\":\"Clicking and dragging\"}],\" your cursor on any of the white circles (or anywhere on the color canvas) will change the hue; the further towards the center the more de-saturated the color.\"]}],[\"$\",\"p\",\"8\",{\"children\":[\"Use the \",[\"$\",\"b\",\"1\",{\"children\":\"lightness wheel\"}],\" around the main color area to make your selected color lighter or darker; you can also paste in an initial hex color code to create harmonie
1s.\"]}],[\"$\",\"h2\",\"9\",{\"id\":\"color-harmonies\",\"children\":[\"Color Harmonies\"]}],[\"$\",\"p\",\"10\",{\"children\":[\"Color harmonies are particularly pleasing combinations of \",[\"$\",\"b\",\"1\",{\"children\":\"two or more colors\"}],\" derived from their relationship on a color wheel. Also known as color chords, color harmonies are useful when exploring a possible color palette, or can be used as a standalone color scheme.\"]}],[\"$\",\"h3\",\"11\",{\"children\":[\"Complementary colors\"]}],[\"$\",\"p\",\"12\",{\"children\":[\"Colors that are \",[\"$\",\"b\",\"1\",{\"children\":\"directly opposite one another\"}],\" on the color wheel are known as complementary colors. Complementary colors have a high contrast and can be very effective as accent colors when paired with a more neutral palette.\"]}],\"$L1b\",[\"$\",\"h3\",\"14\",{\"children\":[\"Split-Complementary Colors\"]}],[\"$\",\"p\",\"15\",{\"children\":[\"A split-complementary harmony is made up of a \",[\"$\",\"b\",\"1\",{\"children\":\"base color and the two adjacent colors\"}],\" on either side of its complement. Split-complementary schemes are lower contrast and can be better for brand palettes.\"]}],\"$L1c\",[\"$\",\"h3\",\"17\",{\"children\":[\"Analogous Colors\"]}],[\"$\",\"p\",\"18\",{\"children\":[\"Analogous harmonies are created by selecting the \",[\"$\",\"b\",\"1\",{\"children\":\"colors directly adjacent\"}],\" to a chosen color. Frequently found in web design, analogous schemes, when paired with a complementary \",[\"$\",\"$L13\",\"3\",{\"href\":\"/contrast-checker\",\"children\":[\"color for contrast\"]}],\", can offer great versatility.\"]}],\"$L1d\",[\"$\",\"h3\",\"20\",{\"children\":[\"Triadic Colors\"]}],[\"$\",\"p\",\"21\",{\"children\":[\"Triadic harmonies consist of \",[\"$\",\"b\",\"1\",{\"children\":\"three colors equidistant\"}],\" from one another on the color wheel. Like complementary colors, triadic schemes tend to be very bright with a high contrast and work best when one color dominates.\"]}],\"$L1e\",[\"$\",\"h3\",\"23\",{\"children\":[\"Tetradic Colors\"]}],[\"$\",\"p\",\"24\",{\"children\":[\"Tetradic color harmonies are formed by \",[\"$\",\"b\",\"1\",{\"children\":\"two sets of complementary colors\"}],\" 60 degrees apart on the color wheel. Tetradic schemes are an excellent starting point for creating color palettes; fine tune them using color shades, tints and tones.\"]}],\"$L1f\",[\"$\",\"h3\",\"26\",{\"children\":[\"Square Colors\"]}],[\"$\",\"p\",\"27\",{\"children\":[\"Similar to tetradic harmonies, square color schemes consist of \",[\"$\",\"b\",\"1\",{\"children\":\"four colors, but set equidistant from one another\"}],\" on the color wheel. Likewise square harmonies are great beginnings of a brand or website color palette.\"]}],\"$L20\",[\"$\",\"h2\",\"29\",{\"id\":\"color-shades-tints-and-tones\",\"children\":[\"Color Shades, Tints and Tones\"]}],[\"$\",\"p\",\"30\",{\"children\":[\"Color shades, tints and tones are created by \",[\"$\",\"b\",\"1\",{\"children\":\"adding black, white and gray\"}],\" respectively to a chosen color. They can be very useful in web design for backgrounds and typography, and are often paired with a complementary color for contrast.\"]}],\"$L21\",[\"$\",\"h3\",\"32\",{\"children\":[\"Color Shades\"]}],[\"$\",\"p\",\"33\",{\"children\":[[\"$\",\"b\",\"0\",{\"children\":\"Adding black\"}],\" in varying levels to a color produces gradually darker variants, or âshades,â of that particular color. Shades work well for link hover effects, or as footer and header backgrounds.\"]}],[\"$\",\"h3\",\"34\",{\"children\":[\"Color Tints\"]}],[\"$\",\"p\",\"35\",{\"children\":[\"Color tints are made by \",[\"$\",\"b\",\"1\",{\"children\":\"adding white to a color\"}],\", resulting in increasingly lighter versions. Tints can also be used for \",[\"$\",\"$L13\",\"3\",{\"href\":\"/blog/css-link-color\",\"children\":[\"CSS hover effects\"]}],\", and perform nicely as modal backgrounds.\"]}],[\"$\",\"h3\",\"36\",{\"children\":[\"Color Tones\"]}],[\"$\",\"p\",\"37\",{\"children\":[\"Tones are created by \",[\"$\",\"b\",\"1\",{\"children\":\"adding gray to a color\"}],\", and produces an almost endless variety of colors depending on what level of gray is used. Less common in web design, tones could be useful for typographic elements like comments, quotes or highlights.\"]}],[\"$\",\"h2\",\"38\",{\"id\":\"primary-secondary-and-tertiary-colors\",\"children\":[\"Primary, Secondary and Tertiary Colors\"]}],[\"$\",\"p\",\"39\",{\"children\":[\"The color wheel is made up of 12 distinct colors, which are subsequently divided into the following three groups: \",[\"$\",\"b\",\"1\",{\"children\":\"primary colors\"}],\" (3), \",[\"$\",\"b\",\"3\",{\"children\":\"secondary colors\"}],\" (3) and \",[\"$\",\"b\",\"5\",{\"children\":\"tertiary colors\"}],\" (6).\"]}],\"$L22\",[\"$\",\"ul\",\"41\",{\"children\":[[\"$\",\"li\",\"0\",{\"children\":[[\"$\",\"p\",\"0\",{\"children\":[[\"$\",\"b\",\"0\",{\"children\":\"Primary colors\"}],\": red, yellow and blue. These are the base colors of the wheel, and every other color contains at least one of the primary colors.\"]}]]}],[\"$\",\"li\",\"1\",{\"children\":[[\"$\",\"p\",\"0\",{\"children\":[[\"$\",\"b\",\"0\",{\"children\":\"Secondary colors\"}],\": orange, green and purple. Secondary colors are made by mixing two of the primary colors together (i.e. red and yellow to make orange).\"]}]]}],[\"$\",\"li\",\"2\",{\"children\":[[\"$\",\"p\",\"0\",{\"children\":[[\"$\",\"b\",\"0\",{\"children\":\"Tertiary colors\"}],\": vermilion (red-orange), amber (yellow-orange), chartreuse (yellow-green), teal (blue-green), violet (blue-purple) and magenta (red-purple). Tertiary colors are the result of mixing a primary and a secondary color.\"]}]]}]]}],[\"$\",\"h2\",\"42\",{\"id\":\"creating-your-color-scheme\",\"children\":[\"Creating Your Color Scheme\"]}],[\"$\",\"p\",\"43\",{\"children\":[\"Armed with the power of the color wheel, creating your own color palette should be far easier than starting from scratch. But if youâre still at a loss, perhaps one of our other tools might suffice.\"]}],[\"$\",\"p\",\"44\",{\"children\":[\"Have an image youâd like extract a palette from? Try our \",[\"$\",\"$L13\",\"1\",{\"href\":\"/image-color-picker\",\"children\":[\"image color picker\"]}],\" instead. Or maybe you just need a regular old \",[\"$\",\"$L13\",\"3\",{\"href\":\"/color-picker\",\"children\":[\"color picker\"]}],\"? And be sure to checkout our \",[\"$\",\"$L13\",\"5\",{\"href\":\"/colors\",\"children\":[\"color library\"]}],\" for additional inspiration.\"]}]]}]}]]}],[\"$\",\"$L23\",null,{\"units\":5}]]}]]}],[\"$\",\"$L24\",null,{\"breadcrumbs\":[{\"href\":\"/color-wheel\",\"name\":\"Color Wheel\"}],\"localizedPaths\":[{\"locale\":\"es\",\"slug\":\"circulo-cromatico\"},{\"locale\":\"fr\",\"slug\":\"roue-chromatique\"},{\"locale\":\"zh\",\"slug\":\"se-lun\"}]}],[\"$\",\"$L25\",null,{}]]}]\n"])</script>
1<script>self.__next_f.push([1,"c:null\n"])</script>
1<script>self.__next_f.push([1,"10:[[\"$\",\"title\",\"0\",{\"children\":\"Color Wheel â HTML Color Codes\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Create perfect color palettes with our color wheel. Start with a base color and find complementary, analogous, triadic and other schemes to elevate your designs.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"canonical\",\"href\":\"https://htmlcolorcodes.com/color-wheel/\"}],[\"$\",\"link\",\"3\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://htmlcolorcodes.com/color-wheel/\"}],[\"$\",\"link\",\"4\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://htmlcolorcodes.com/color-wheel/\"}],[\"$\",\"link\",\"5\",{\"rel\":\"alternate\",\"hrefLang\":\"es\",\"href\":\"https://htmlcolorcodes.com/es/circulo-cromatico/\"}],[\"$\",\"link\",\"6\",{\"rel\":\"alternate\",\"hrefLang\":\"fr\",\"href\":\"https://htmlcolorcodes.com/fr/roue-chromatique/\"}],[\"$\",\"link\",\"7\",{\"rel\":\"alternate\",\"hrefLang\":\"zh\",\"href\":\"https://htmlcolorcodes.com/zh/se-lun/\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:title\",\"content\":\"Color Wheel\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:description\",\"content\":\"Create perfect color palettes with our color wheel. Start with a base color and find complementary, analogous, triadic and other schemes to elevate your designs.\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:url\",\"content\":\"https://htmlcolorcodes.com/color-wheel/\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:site_name\",\"content\":\"HTML Color Codes\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image\",\"content\":\"https://colorcodes.imgix.net/4nxeT3Q1pjUgS5Stnppzij/debf01a3d3b9d768e9c6e0da8ff41d49/color-wheel-hero.jpg\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:width\",\"content\":\"1920\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image:height\",\"content\":\"1200\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:title\",\"content\":\"Color Wheel\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:description\",\"content\":\"Create perfect color palettes with our color wheel. Start with a base color and find complementary, analogous, triadic and other schemes to elevate your designs.\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:image\",\"content\":\"https://colorcodes.imgix.net/4nxeT3Q1pjUgS5Stnppzij/debf01a3d3b9d768e9c6e0da8ff41d49/color-wheel-hero.jpg\"}],[\"$\",\"link\",\"20\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"link\",\"21\",{\"rel\":\"icon\",\"href\":\"/icon.svg?4ee8f32a0051c5ff\",\"type\":\"image/svg+xml\",\"sizes\":\"any\"}],[\"$\",\"link\",\"22\",{\"rel\":\"icon\",\"href\":\"/icon1.png?55484c957f146e37\",\"type\":\"image/png\",\"sizes\":\"192x192\"}],[\"$\",\"link\",\"23\",{\"rel\":\"icon\",\"href\":\"/icon2.png?e54694489ec32db1\",\"type\":\"image/png\",\"sizes\":\"512x512\"}],[\"$\",\"link\",\"24\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png?7fbf5257c37bc783\",\"type\":\"image/png\",\"sizes\":\"180x180\"}]]\n"])</script>
1<script>self.__next_f.push([1,"26:I[10242,[\"445\",\"static/chunks/445-2edaf82f81c27c2f.js\",\"493\",\"static/chunks/493-9059d463e843d1b0.js\",\"233\",\"static/chunks/app/(tools)/color-wheel/page-9a9f0ff4545d2277.js\"],\"default\"]\n22:[\"$\",\"$1\",\"40\",{\"children\":[[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/7vLu1kQXslYIlyz9kPBwzP/79725c6b039adc2ace25c0e67dc5aed4/html-color-codes-color-wheel-primary-secondary-tertiary--small.png\",\"width\":960,\"height\":1600,\"title\":\"Color Wheel: Primary, Secondary and Tertiary Colors (Small) [en]\",\"description\":\"\"},\"className\":\"sm:hidden\"}],[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/6ZuNxOQOQxVXyubbQdm8s3/dc47e468ad814cc17d50c3118d326646/html-color-codes-color-wheel-primary-secondary-tertiary--large.png\",\"width\":1920,\"height\":1280,\"title\":\"Color Wheel: Primary, Secondary and Tertiary Colors (Large) [en]\",\"description\":\"\"},\"className\":\"hidden sm:block\"}]]}]\n1c:[\"$\",\"$1\",\"16\",{\"children\":[[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/5ZkFDnecMW8UMugDgMBZjV/4a574b89056e8ea6ec59fa8b67b3c7f5/html-color-codes-color-wheel-split-complementary--small.png\",\"width\":960,\"height\":1600,\"title\":\"Color Wheel: Split-Complementary Colors (Small) [en]\",\"description\":\"\"},\"className\":\"sm:hidden\"}],[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/2Rom15YeaNtNv1V28AdDaw/e425a87174298fa6e31a7bc0d5f0a95b/html-color-codes-color-wheel-split-complementary--large.png\",\"width\":1920,\"height\":1280,\"title\":\"Color Wheel: Split-Complementary Colors (Large) [en]\",\"description\":\"\"},\"className\":\"hidden sm:block\"}]]}]\n1b:[\"$\",\"$1\",\"13\",{\"children\":[[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/7bZoOlVHRwjGPlvR2lcvVV/9b0884fbc9326c33fa90d276db78bcf0/html-color-codes-color-wheel-complementary--small.png\",\"width\":960,\"height\":1600,\"title\":\"Color Wheel: Complementary Colors (Small) [en]\",\"description\":null},\"className\":\"sm:hidden\"}],[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/2H6TEuMTV92EJw"])</script>
1<script>self.__next_f.push([1,"IDG2INgT/6f243183f8b05a790d3412b5d55ea1f7/html-color-codes-color-wheel-complementary--large.png\",\"width\":1920,\"height\":1280,\"title\":\"Color Wheel: Complementary Colors (Large) [en]\",\"description\":null},\"className\":\"hidden sm:block\"}]]}]\n"])</script>
1<script>self.__next_f.push([1,"21:[\"$\",\"$1\",\"31\",{\"children\":[[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/oB2atXEy8CTCUn09kT8Xp/0edc8cba4b66d5cecf0151c3dce00647/html-color-codes-color-wheel-shades-tints-tones--small.png\",\"width\":960,\"height\":1600,\"title\":\"Color Wheel: Color Shades, Tints and Tones (Small) [en]\",\"description\":\"\"},\"className\":\"sm:hidden\"}],[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/4qAMy0XxT7bfs7gaGeNOdy/65911fde33219bd98628ed3077c21ef6/html-color-codes-color-wheel-shades-tints-tones--large.png\",\"width\":1920,\"height\":1280,\"title\":\"Color Wheel: Color Shades, Tints and Tones (Large) [en]\",\"description\":\"\"},\"className\":\"hidden sm:block\"}]]}]\n1f:[\"$\",\"$1\",\"25\",{\"children\":[[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/1M3g7JVJzP4fgrqFNdwgJw/78e26bdde699bcdac85bb010bdd9d192/html-color-codes-color-wheel-tetradic--small.png\",\"width\":960,\"height\":1600,\"title\":\"Color Wheel: Tetradic Colors (Small) [en]\",\"description\":\"\"},\"className\":\"sm:hidden\"}],[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/2A45xGZIE2yRQa8SqYStyK/98e8e8d375a4db6c0c2cef4cba7f5f4c/html-color-codes-color-wheel-tetradic--large.png\",\"width\":1920,\"height\":1280,\"title\":\"Color Wheel: Tetradic Colors (Large) [en]\",\"description\":\"\"},\"className\":\"hidden sm:block\"}]]}]\n"])</script>
1<script>self.__next_f.push([1,"1e:[\"$\",\"$1\",\"22\",{\"children\":[[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/1yHa0QinXMKPlvsABdbytN/9ff9cf191a2bdf287d6306e342b7fc47/html-color-codes-color-wheel-triadic--small.png\",\"width\":960,\"height\":1600,\"title\":\"Color Wheel: Triadic Colors (Small) [en]\",\"description\":\"\"},\"className\":\"sm:hidden\"}],[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/1P5z5fGoL6UtylVxf4ZBQz/9043318429883fc7ac63023983fb9e56/html-color-codes-color-wheel-triadic--large.png\",\"width\":1920,\"height\":1280,\"title\":\"Color Wheel: Triadic Colors (Large) [en]\",\"description\":\"\"},\"className\":\"hidden sm:block\"}]]}]\n1a:[\"$\",\"$1\",\"2\",{\"children\":[[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/3h9MG88R13kSdiQV6gJ8o0/4b13c802e129be73f9eff64e80a59cc0/html-color-codes-color-wheel-color-harmonies--small.png\",\"width\":960,\"height\":1600,\"title\":\"Color Wheel: Color Harmonies (Small) [en]\",\"description\":\"\"},\"className\":\"sm:hidden\"}],[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/26tTkbCIMHSBtk1ULmWL71/0225ca7a41025f97de2dcae51731d09b/html-color-codes-color-wheel-color-harmonies--large.png\",\"width\":1920,\"height\":1280,\"title\":\"Color Wheel: Color Harmonies (Large) [en]\",\"description\":\"\"},\"className\":\"hidden sm:block\"}]]}]\n"])</script>
1<script>self.__next_f.push([1,"1d:[\"$\",\"$1\",\"19\",{\"children\":[[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/3HJtWUTlyaOcq9yGxuoNaI/4d22a055d814463ca8792156e29a6c4d/html-color-codes-color-wheel-analogous--small.png\",\"width\":960,\"height\":1600,\"title\":\"Color Wheel: Analogous Colors (Small) [en]\",\"description\":\"\"},\"className\":\"sm:hidden\"}],[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/3J6BCThsMOvB0xZh5E1fSz/d89dbb7ed4b99d180aa0ae163dfb1d66/html-color-codes-color-wheel-analogous--large.png\",\"width\":1920,\"height\":1280,\"title\":\"Color Wheel: Analogous Colors (Large) [en]\",\"description\":\"\"},\"className\":\"hidden sm:block\"}]]}]\n"])</script>
1<script>self.__next_f.push([1,"20:[\"$\",\"$1\",\"28\",{\"children\":[[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/3SRNJocNQdbgY1f2uM0DYQ/e17dbc0f9d4ab8edc0185003b018f9f5/html-color-codes-color-wheel-square--small.png\",\"width\":960,\"height\":1600,\"title\":\"Color Wheel: Square Colors (Small) [en]\",\"description\":\"\"},\"className\":\"sm:hidden\"}],[\"$\",\"$L26\",null,{\"asset\":{\"url\":\"https://images.ctfassets.net/59e17fdc7mop/1d2kXzMISE5NlNK0s76M8y/47d98b6c4cb6ed3d32c218ebc5c0101b/html-color-codes-color-wheel-square--large.png\",\"width\":1920,\"height\":1280,\"title\":\"Color Wheel: Square Colors (Large) [en]\",\"description\":\"\"},\"className\":\"hidden sm:block\"}]]}]\n"])</script>
1</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.