🕷️ Crawler Inspector

This website uses cookies, pixel tags, and local storage for performance, personalization, and marketing purposes. We use our own cookies and some from third parties. Only essential cookies are turned on by default. Allow all cookies Do not allow cookies [Skip to main content](https://www.figma.com/color-wheel/#main) - Products - - [Figma Design Design and prototype in one place](https://www.figma.com/design/) - [Dev Mode Translate designs into code](https://www.figma.com/dev-mode/) - [FigJam Collaborate with a digital whiteboard](https://www.figma.com/figjam/) - [Figma Slides Co-create presentations](https://www.figma.com/slides/) - [Figma Draw Illustrate with advanced vector tools](https://www.figma.com/draw/) - [Figma Buzz Beta Produce on-brand assets at scale](https://www.figma.com/buzz/) - [Figma Sites Beta Publish fully responsive websites](https://www.figma.com/sites/) - [Figma Make Prompt to code anything you can imagine](https://www.figma.com/make/) - [AI Explore all Figma AI features](https://www.figma.com/ai/) - [MCP Connect Figma to AI coding tools](https://www.figma.com/mcp-catalog/) - [Downloads Get the desktop, mobile, and font installer apps](https://www.figma.com/downloads/) - [Release Notes See the latest features and releases](https://www.figma.com/release-notes/) - Solutions - ## Use cases ## Roles ## Organizations - Community - - [Events Learn best practices at virtual events](https://www.figma.com/events-and-webinars/#upcoming-events) - [User groups Join a local Friends of Figma group](https://friends.figma.com/) - [Customer stories Read about leading product teams](https://www.figma.com/customers/) - [Figma Gallery Explore Figma Make and Figma Sites projects made by our users](https://www.figma.com/gallery/) - Resources - - [Shortcut: The Figma blog Stories about how products take shape—and shape our world](https://www.figma.com/blog/) ## Get started ## Learn - [Pricing](https://www.figma.com/pricing/) - [Log in](https://www.figma.com/login) - [Contact sales](https://www.figma.com/contact/) - [Get started](https://www.figma.com/signup) [Get started for free](https://www.figma.com/signup) - [Log in](https://www.figma.com/login) - [Contact sales](https://www.figma.com/contact/) - [Get started](https://www.figma.com/signup) [Get started for free](https://www.figma.com/signup) 1. [Home](https://www.figma.com/) 2. [Tools](https://www.figma.com/tools/) 3. Color Wheel # Color Wheel Easily generate a custom color palette with Figma [Get color palette](https://www.figma.com/file/new?try-plugin-id=1286792998372727741&try-plugin-version-id=68346&try-plugin-name=Color+wheel+palette+generator&is-widget=0&is-playground-file=0&fuid=1014223665036315863&try-plugin-editor-type=design&from-website-next=true&try-plugin-params=%7B%22initialColor%22%3A%22%23693EFE%22%2C%22initialPaletteType%22%3A%22Complementary%22%2C%22locale%22%3A%22en-us%22%7D) ## Pick a color Color wheel gradient Lightness ### HEX ## Edit color ### HEX Use the left and right arrow keys to change the saturation, use the up and down arrows to change the brightness. Hue Format RGB RGB HSL HSB Red Green Blue ### RGB Copy RGB:105,62,254 ### HSL Copy HSL:253, 99%, 62% ### HSB Copy HSB:253, 76%, 100% ### CMYK Copy CMYK:59, 76, 0, 0 ## Pick palette settings Custom palettes Complementary Complementary Split Monochromatic Analogous Triadic Square 1. Copy Hex:\#693EFE 2. Copy Hex:\#D3FE3E [Get color palette](https://www.figma.com/file/new?try-plugin-id=1286792998372727741&try-plugin-version-id=68346&try-plugin-name=Color+wheel+palette+generator&is-widget=0&is-playground-file=0&fuid=1014223665036315863&try-plugin-editor-type=design&from-website-next=true&try-plugin-params=%7B%22initialColor%22%3A%22%23693EFE%22%2C%22initialPaletteType%22%3A%22Complementary%22%2C%22colors%22%3A%5B%22%23693EFE%22%2C%22%23D3FE3E%22%5D%2C%22locale%22%3A%22en-us%22%7D) ### Bring it to life with Figma Jumpstart your designs with your very own custom color palette. [Get color palette](https://www.figma.com/file/new?try-plugin-id=1286792998372727741&try-plugin-version-id=68346&try-plugin-name=Color+wheel+palette+generator&is-widget=0&is-playground-file=0&fuid=1014223665036315863&try-plugin-editor-type=design&from-website-next=true&try-plugin-params=%7B%22initialColor%22%3A%22%23693EFE%22%2C%22initialPaletteType%22%3A%22Complementary%22%2C%22locale%22%3A%22en-us%22%7D) Color plays a valuable role in our daily life: it conveys feelings, changes actions, and influences every element of how humans view the world. ## Intro Imagine you’ve poured your heart into crafting a beautiful, captivating design. You've nailed the layout, the typography feels just right, but something feels off. The [colors](https://www.figma.com/colors/) just aren't clicking. In the world of design, color choices are not just about aesthetics. Color can guide viewers through your project, evoke emotions, tell stories, and, ultimately, create an experience. Choosing the right colors can make the difference between a clear, engaging project and one that leaves viewers confused or disoriented. But with a vast spectrum of colors at your fingertips, how do you ensure you're picking the right ones and combining them effectively? Enter the color wheel — a timeless, powerful tool for crafting harmonious color palettes that elevate your designs every time. ## What is the Color Wheel The color wheel is a simple but powerful tool that helps designers make decisions about color, create schemes that resonate with audiences, and achieve specific design goals. The circular diagram organizes colors based on their relationships, categorizing them into primary colors, secondary colors, and tertiary colors, illustrating how they transition and blend. Designers use this visualization tool to understand color interactions and create harmonious color schemes for digital projects. ## Who invented the color wheel Sir Isaac Newton invented the color wheel in 1666, laying the groundwork for modern [color theory](https://www.figma.com/resource-library/what-is-color-theory/). His curiosity about light led him to experiment with passing white light through a prism, separating the white light into a spectrum of colors. This phenomenon inspired Newton to arrange these colors in a circular format, creating the first color wheel. This ingenious diagram demonstrated how colors relate to each other and established a systematic way to understand how they interact and blend. Sir Isaac Newton's color wheel remains a foundational tool in science and art. ## How many colors are on the color wheel Typically, a standard color wheel includes 12 colors: three basic colors (red, yellow, blue, known as primary colors), three secondary colors (orange, green, violet), and six tertiary colors (red-orange, yellow-orange, yellow-green, blue-green, blue-violet, red-violet). Advanced color wheels incorporate a broader spectrum of tints, shades, and tones for more nuanced color design—especially useful for digital and UI design. This expansion gives designers more precise control over color selection, facilitating the creation of complex and refined color themes and palettes. ## How to use the color wheel Using a color wheel is a simple and effective way to create a compelling and cohesive color palette for any project. Here’s how to do it: **Step 1: Choose a base color.** Use the color picker to select a base color on the wheel. This color will be the foundation for your color palette, setting the tone and mood for your design and influencing the selection of additional colors. **Step 2: Select a color scheme.** Select a color scheme. Each scheme offers a different visual impact: - **Complementary** gives you maximum contrast by using colors directly opposite each other. - **Triadic** creates a vibrant yet balanced look by using colors in a triangular formation. - **Analogous** produces a harmonious effect with colors adjacent to each other. - **Split-complementary** delivers a high-contrast look with less tension, using the base color and two adjacent colors as the complement. - **Square** enhances diversity with four colors evenly spaced around the wheel. - **Monochromatic** harnesses the power of lightness (tints) and darkness (shades) to create subtle transitions and striking contrasts based on the base color. **Step 3: Apply to your design.** Once you find the best color palette for your project, apply it to your design to achieve the desired visual impact. ## Key color theory Concepts Color theory provides a framework for designers to create the perfect color scheme and convey the desired impression, like sophistication with deep purples and golds or a sense of calm with soft blues and greens. Whether you aim to capture attention with high-contrast combinations or create a harmonious atmosphere, understanding color theory is crucial. Here’s an overview of some key concepts:  ### [What are the primary colors (RYB)](https://www.figma.com/color-wheel/#what-are-the-primary-colors-ryb) Primary colors in the RYB color model are red, yellow, and blue. These three colors form the basis of the color wheel and can be mixed in different proportions to create all other colors.  ### [What are the secondary colors](https://www.figma.com/color-wheel/#what-are-the-secondary-colors) Secondary colors hold the space between primary colors on the color wheel and are formed by blending two primary hues together. For example, mixing red and blue creates purple, while combining red and yellow makes orange. To remember how green is produced, look to the adjacent primary colors for your answer: yellow and blue.  ### [What are the tertiary colors](https://www.figma.com/color-wheel/#what-are-the-tertiary-colors) Filling in the rest of the wheel are the tertiary colors, or intermediate colors. You get these colors when you mix a primary and secondary color. For example, mixing red and orange gives you red-orange, and fills in the missing space between the two. With a scrollable color wheel, you can adjust to the individual shade of red-orange that you want based on your placement on the wheel. You can also mix blue-green, blue-violet, red-orange, red-violet, yellow-orange, and yellow-green to create unique tertiary colors. This granular color-picking ability helps product designers find the exact shade and accent colors they want.  ## Choosing a color scheme to create color harmony > **Color plays a crucial role in the way a product is accessed, perceived, remembered, and differentiated from competitors. When carefully selected with a product’s context in mind—it’s audience, industry, and intended outcomes—color is a powerful tool that can effect a user's behavior.** — Chelsea White, Brand Designer, Figma ### [What are the seven color schemes?](https://www.figma.com/color-wheel/#what-are-the-seven-color-schemes) Color schemes are strategic color combinations that help achieve visual balance. These schemes use color theory principles to create aesthetically pleasing designs. There are seven common types of color schemes: #### [Complementary Colors](https://www.figma.com/color-wheel/#complementary-colors) Complementary colors pairs colors from opposite sides of the color wheel to create a high contrast. You’ll find the complementary color if you pick a color and then travel 180° around the color wheel. Some complementary color schemes are well known and popular, like red and green. These color schemes can be powerful if you want both warm and cool colors in your design.  #### Complimentary colors for \#693EFE Complementary 1. Copy Hex:\#693EFE 2. Copy Hex:\#D3FE3E #### [Split Complementary Colors](https://www.figma.com/color-wheel/#split-complementary-colors) Split complementary colors are color combinations in which you combine a base color with the two adjacent tertiary colors on either side of the color. This gives you a palette of three colors and helps to create a more subtle color palette.  #### Split complimentary colors for \#693EFE Split 1. Copy Hex:\#693EFE 2. Copy Hex:\#FEC93E 3. Copy Hex:\#73FE3E #### [Monochromatic Colors](https://www.figma.com/color-wheel/#monochromatic-colors) Monochromatic colors are probably the easiest to wrap your head around because they’re just a lighter and darker version of your primary color. A monochromatic color scheme removes the decision-making complexity around using several contrasting colors and generally allows designers to use color effectively in a subtle way. To make a monochromatic color palette, you scale the lighter and darker versions the same amount from your primary color.  #### Monochromatic colors for \#693EFE Monochromatic 1. Copy Hex:\#693EFE 2. Copy Hex:\#3901FB 3. Copy Hex:\#9A7DFE #### [Analogous](https://www.figma.com/color-wheel/#analogous) Analogous colors are groups of three colors that sit adjacent on the color wheel. It creates a softer, more natural color palette. Nature, after all, has lots of closely related hues. Just think about leaves on a tree, or the subtle differences in the color of the ocean. An analogous color scheme is quite harmonious and can help tie different elements together in a design.  #### Analogous colors for \#693EFE Analogous 1. Copy Hex:\#693EFE 2. Copy Hex:\#C93EFE 3. Copy Hex:\#3E73FE #### [Triadic](https://www.figma.com/color-wheel/#triadic) A triadic color scheme gives you three equally contrasting colors. The points are equally distributed around the color wheel, forming an equilateral triangle. It’s best to pick a single primary color and use the other two as accents when designing with a triadic color scheme. Triadic color schemes tend to be more bold and playful.  #### Triadic colors for \#693EFE Triadic 1. Copy Hex:\#693EFE 2. Copy Hex:\#FE693E 3. Copy Hex:\#3EFE69 #### [Tetradic (double complementray)](https://www.figma.com/color-wheel/#tetradic-double-complementray) What do Google and Microsoft have in common? They both use tetradic color palettes for their logos. Tetradic means relates to a group of four, so in this case, we’re using the color wheel to select four colors that form a rectangle. These colors include two sets of complementary colors, creating a vibrant and energetic palette. A tetradic color scheme is sometimes called a ‘double complementary’ scheme.  #### Tetradic colors for \#693EFE Square 1. Copy Hex:\#693EFE 2. Copy Hex:\#FE3E73 3. Copy Hex:\#D3FE3E 4. Copy Hex:\#3EFEC9 #### [Square](https://www.figma.com/color-wheel/#square) Similar to tetradic, a square color scheme uses four colors, but in this example, they are spaced evenly around the color wheel, forming a square. This creates a more balanced look compared to the high contrast of tetradic schemes. Like tetradic color schemes, it's best to choose one dominant color and use the others as accents. #### [Warm colors vs cool colors](https://www.figma.com/color-wheel/#warm-colors-vs-cool-colors) The color wheel distinguishes between warm and cool hues. Warm colors convey intensity, such as red, orange, and yellow. Cool tones like purple, blue, and green evoke feelings of calmness and relaxation. Notice how the meditation app *Calm* primarily uses the color blue? It’s intentionally chosen to evoke a sense of peace. ## Color models A color model is a system that helps represent colors using numerical values. The four color models used on this page are: 1. [Red](https://www.figma.com/colors/red/), [green](https://www.figma.com/colors/green/) and [blue](https://www.figma.com/colors/blue/) (RGB) 2. Cyan, magenta, yellow, and key (CMYK) 3. Hue, saturation and lightness (HSL) 4. Hexidecimal codes ### [Red, green, blue (RGB)](https://www.figma.com/color-wheel/#red-green-blue-rgb) The red, green, blue ([RGB](https://www.figma.com/resource-library/what-is-rgb/)) color model is the foundation for any design displayed on a screen. This color model's roots are based on human perception of colors and how our eyes interact with light. These ‘additive colors’ can be mixed into the array of colors that we interact with on our screens every day. ### [Cyan, magenta, yellow, and key (CMYK)](https://www.figma.com/color-wheel/#cyan-magenta-yellow-and-key-cmyk) On the other hand, the [CMYK model](https://www.figma.com/resource-library/what-is-cmyk/) is the foundation for all print design. These ‘subtractive colors’ absorb wavelengths of light, which more clearly match the pigments found in the real world. - **Cyan (C):** [Cyan](https://www.figma.com/colors/cyan/) is a bluish-green color. When cyan ink is applied to a surface, it absorbs red light, making it appear blue-green to the human eye. - **Magenta (M):** [Magenta](https://www.figma.com/colors/magenta/) is a purplish-red color. It absorbs green light, leading to the perception of a reddish-purplish hue. - **Yellow (Y):** [Yellow](https://www.figma.com/colors/yellow/) absorbs blue light, resulting in a yellowish color when printed. - **Key (K) or Black:** The "K" in CMYK represents "Key," which refers to the [black](https://www.figma.com/colors/black/) component. Black ink is used to enhance the depth and contrast of images and text. Additionally, using black ink helps prevent the muddying of colors that can occur when attempting to create black by combining colors. ### [Hue, Saturation and Lightness](https://www.figma.com/color-wheel/#hue-saturation-and-lightness) Hue represents the colors seen on the color wheel. Think of it as a spectrum within a 360-degree circle. As you navigate around this circle, you encounter different hues. - **Color Hue:** The definition of hue is complex, but at its core, it refers to the colors you see on the color wheel. The color wheel is a 360-degree circle, and you can find different hues as you travel around the circle. - **Saturation:** The vibrancy or intensity of a hue, known as saturation, reflects its richness and purity.At the outside of the color wheel, you can see a hue at full saturation. As you travel towards the center of the circle, the hue becomes less intense. To bring down the hues intensity, we mix in black and white (i.e. grey). - **Lightness:** Lightness determines how much black or white we mix into a color. You can get pastel colors by mixing in more white, and a deeper, darker palette by mixing in more black.  #### Shades and Tints for \#693EFE Shades 1. Copy Hex:\#693EFE 2. Copy Hex:\#4E1BFE 3. Copy Hex:\#3801F5 4. Copy Hex:\#3001D2 5. Copy Hex:\#2801AF 6. Copy Hex:\#20018C 7. Copy Hex:\#180169 8. Copy Hex:\#100046 Tints 1. Copy Hex:\#693EFE 2. Copy Hex:\#7751FE 3. Copy Hex:\#8663FE 4. Copy Hex:\#9476FE 5. Copy Hex:\#A389FE 6. Copy Hex:\#B19BFE 7. Copy Hex:\#C0AEFF 8. Copy Hex:\#CEC0FF ### [Hexidecimal codes](https://www.figma.com/color-wheel/#hexidecimal-codes) Hexadecimal (often misspelled as “Hexidecimal”) codes, or hex codes, tell your computer how much red, green, and blue to mix to produce the color of a pixel on your screen. Each pixel on your screen is made of three color elements that produce red, green, and blue light. These color elements (called subpixels), are so small that they appear as a single color to the human eye. Mixing different amounts of red, green, and blue light each pixel can display up to 16 million colors, which is beyond what the human eye can see. Each pixel can mix 256 red values, 256 green values, and 256 blue values to generate 16 million color possibilities. (Multiply 256 x 256 x 256, and you get more than 16 million.) Computers send these values to each pixel using binary code, a language comprised of 1s and 0s. For instance, a red value of 200 would be represented as 11001000 in binary code. Since binary code is incomprehensible to humans, the hexadecimal system is employed as a readable alternative. #### [How does the hex code work?](https://www.figma.com/color-wheel/#how-does-the-hex-code-work) A hex code has three values—one for red, green, and blue, each represented by two digits. For example, \#F234A2 consists of: - **red: F2** - **green: 34** - **blue: A2** What’s the deal with the letters? Unlike our usual base-10 system, Hexadecimal counting uses base-16. It goes from 0 to 9, then, to represent numbers from 10 to 15, it uses A to F. #### [How to convert between hex codes and RGB](https://www.figma.com/color-wheel/#how-to-convert-between-hex-codes-and-rgb) Since hex codes and HSL values are just different ways of representing the RGB color model, you can convert between them. Converting a hex code into an RGB value isn’t something you do by hand very often, but there’s some quick math to do it. For each of the three values: - Take the first number (or letter) and multiply it by 16 - Add the second number (or letter) For \#E234A2, the first value is E2. It represents the number 226 ( 14 \* 16 + 2 ). This number is the RGB value for the color red. And \#E234A2 has the following RGB values: - **red**: 226 - **green**: 49 - **blue**: 152 (You can also convert hex codes or RGB values into HSL values, but the math gets a bit more complicated!) ### [Color profiles in digital design: sRGB and P3](https://www.figma.com/color-wheel/#color-profiles-in-digital-design-srgb-and-p3) Various devices, monitors, browsers, and applications use diverse technologies for color rendering, which can result in visual disparities across devices. When designing for digital platforms, it's crucial to consider color profiles, as they establish a consistent standard for defining and rendering colors based on the specific screen.  Color profiles in digital design, like sRGB and P3, ensure consistent color rendering across devices. sRGB has been the web standard for decades for content creators and web designers, ensuring visual consistency across most consumer devices. Display P3, often abbreviated as P3, can render a spectrum of colors with heightened vibrancy, depicting 49% more distinguishable colors than sRGB. However, using P3 on devices like smartphones or laptops designed for sRGB might lead to excessive energy consumption since the device needs to work harder to render the extended color range. If you are designing for platforms like iOS or high-definition/retina screens, Display P3 is the best choice, but not all applications and software fully supports its wider color range. [Learn how Figma supports P3 color profiles here.](https://help.figma.com/hc/en-us/articles/360039825114-Manage-color-profiles-in-design-files) ### [WCAG and color accessibility](https://www.figma.com/color-wheel/#wcag-and-color-accessibility) In 1999, the first version of Web Content Accessibility Guidelines (WCAG) was published by the World Wide Web Consortium (W3C). This technical document ensures web content is accessible to all users. Recognized as the world standard for web accessibility, the W3C's recommendations hold significant sway within the web development and digital design communities. The organization publishes ongoing updates to reflect technological advancements and emerging accessibility needs. The current document, WCAG 2.1, expands web accessibility guidelines by addressing a wider range of disabilities, including cognitive impairments and mobile device usage, creating a more inclusive web experience. One critical aspect covered in the guidelines is visual accessibility, particularly the importance of contrast in color design. Proper contrast ensures that text and interactive elements stand out against background colors, essential for users who have visual impairments like color blindness or low vision. WCAG recommendations specify minimum contrast ratios for text and images of text to ensure that all users, regardless of their visual capabilities, can access information. For example, a minimum contrast ratio of 4.5:1 is recommended for normal text. Larger text must have a ratio of at least 3:1. [WCAG 3.0](https://www.w3.org/TR/wcag-3.0/) is currently in development and promises to be even more comprehensive. More nuanced guidelines for color contrast are expected to be introduced, among other enhancements. [Learn more about WCAG 2.1](https://www.w3.org/TR/WCAG21/) #### Accessibility for \#693EFE Contrast 5\.64 Large Text \#693EFE Normal Text How you design, align, and build matters. Do it together with Figma. This is \#693EFE text on a \#FFFFFF background. | Category | AA | AAA | |---|---|---| | Normal text | Pass | | Contrast 3\.72 Large Text \#693EFE Normal Text How you design, align, and build matters. Do it together with Figma. This is \#693EFE text on a \#000000 background. | Category | AA | AAA | |---|---|---| | Normal text | Fail | | #### Color simulations for \#693EFE Protanopia 1. Copy Hex:\#693EFE 2. Copy Hex:\#5656D0 Deuteranopia 1. Copy Hex:\#693EFE 2. Copy Hex:\#595CC4 Tritanopia 1. Copy Hex:\#693EFE 2. Copy Hex:\#67AB79 Achromatopsia 1. Copy Hex:\#693EFE 2. Copy Hex:\#616161 ### Bring it to life with Figma Jumpstart your designs with your very own custom color palette. [Get color palette](https://www.figma.com/file/new?try-plugin-id=1286792998372727741&try-plugin-version-id=68346&try-plugin-name=Color+wheel+palette+generator&is-widget=0&is-playground-file=0&fuid=1014223665036315863&try-plugin-editor-type=design&from-website-next=true&try-plugin-params=%7B%22initialColor%22%3A%22%23693EFE%22%2C%22initialPaletteType%22%3A%22Complementary%22%2C%22locale%22%3A%22en-us%22%7D) ## Keep exploring [](https://www.figma.com/color-picker/) ### Image color picker Create custom color palettes from any image with our color picker [Explore image color picker](https://www.figma.com/color-picker/)  ### What is color theory? Color theory helps designers make color choices that captivate users and elevate a brand. [Explore color theory](https://www.figma.com/resource-library/what-is-color-theory/)  ### UI design Learn the ins and outs of the user interface design process. [Explore UI design articles](https://www.figma.com/resource-library/ui-design/) ## Explore More Tools - ### Color & Palette Tools - [Color Wheel](https://www.figma.com/color-wheel/) - [Image Color Picker](https://www.figma.com/color-picker/) - [Color Contrast Checker](https://www.figma.com/color-contrast-checker/) - [Color Meanings](https://www.figma.com/colors/) - ### Typography & Text Tools - [Font Library](https://www.figma.com/fonts/) - [Lorem Ipsum Generator](https://www.figma.com/lorem-ipsum-generator/) - [Color Meanings](https://www.figma.com/colors/) - ### Design Utility Tools - [Color Contrast Checker](https://www.figma.com/color-contrast-checker/) - [Color Palette Library](https://www.figma.com/color-palettes/) - [QR Code Generator](https://www.figma.com/qr-code-generator/) Back to top [Get color palette](https://www.figma.com/file/new?try-plugin-id=1286792998372727741&try-plugin-version-id=68346&try-plugin-name=Color+wheel+palette+generator&is-widget=0&is-playground-file=0&fuid=1014223665036315863&try-plugin-editor-type=design&from-website-next=true&try-plugin-params=%7B%22initialColor%22%3A%22%23693EFE%22%2C%22initialPaletteType%22%3A%22Custom%22%2C%22colors%22%3A%5B%22%23693EFE%22%2C%22%23D3FE3E%22%5D%2C%22locale%22%3A%22en-us%22%7D) [Get started for free](https://www.figma.com/signup?locale=en-us) ## Figma Socials ## Product - [Figma Design](https://www.figma.com/design/) - [Dev Mode](https://www.figma.com/dev-mode/) - [FigJam](https://www.figma.com/figjam/) - [Figma Slides](https://www.figma.com/slides/) - [Figma Draw](https://www.figma.com/draw/) - [Figma BuzzBeta](https://www.figma.com/buzz/) - [Figma SitesBeta](https://www.figma.com/sites/) - [Figma Make](https://www.figma.com/make/) - [Figma WeaveNew](https://weave.figma.com/) - [AI](https://www.figma.com/ai/) - [Downloads](https://www.figma.com/downloads/) - [Release notes](https://www.figma.com/release-notes/) ## Plans - [Pricing](https://www.figma.com/pricing/) - [Enterprise](https://www.figma.com/enterprise/) - [Organization](https://www.figma.com/organization/) - [Professional](https://www.figma.com/professional/) ## Use cases - [UI design](https://www.figma.com/ui-design-tool/) - [UX design](https://www.figma.com/ux-design-tool/) - [Wireframing](https://www.figma.com/wireframe-tool/) - [Diagramming](https://www.figma.com/figjam/diagramming-tool/) - [Prototyping](https://www.figma.com/prototyping/) - [Brainstorming](https://www.figma.com/figjam/brainstorming-tool/) - [Presentation Maker](https://www.figma.com/presentation-maker/) - [Online whiteboard](https://www.figma.com/figjam/online-whiteboard/) - [Strategic planning](https://www.figma.com/figjam/strategic-planning/) - [Mind mapping](https://www.figma.com/figjam/mind-map/) - [Concept map](https://www.figma.com/figjam/concept-map/) - [AI app builder](https://www.figma.com/solutions/ai-app-builder/) - [AI prototype generator](https://www.figma.com/solutions/ai-prototype-generator/) - [AI website builder](https://www.figma.com/solutions/ai-website-builder/) - [AI wireframe generator](https://www.figma.com/solutions/ai-wireframe-generator/) - [Banner maker](https://www.figma.com/solutions/banner-maker/) - [Ad maker](https://www.figma.com/solutions/ad-maker/) ## Resources - [Blog](https://www.figma.com/blog/) - [Best practices](https://www.figma.com/best-practices/) - [GIF maker](https://www.figma.com/gif-maker/) - [Gradient Generator](https://www.figma.com/gradient-generator/) - [QR code generator](https://www.figma.com/qr-code-generator/) - [Color wheel](https://www.figma.com/color-wheel/) - [Colors](https://www.figma.com/colors/) - [Color picker](https://www.figma.com/color-picker/) - [Color palettes](https://www.figma.com/color-palettes/) - [Color palette generator](https://www.figma.com/color-palette-generator/) - [Color contrast checker](https://www.figma.com/color-contrast-checker/) - [Font library](https://www.figma.com/fonts/) - [Lorem ipsum generator](https://www.figma.com/lorem-ipsum-generator/) - [Templates](https://www.figma.com/templates/) - [Developers](https://www.figma.com/developers) - [Integrations](https://www.figma.com/product-integrations/) - [Affiliate program](https://www.figma.com/affiliate-program/) - [Resource library](https://www.figma.com/resource-library/) - [Reports and insights](https://www.figma.com/reports/) - [Support](https://help.figma.com/hc/en-us) - [Status](https://status.figma.com/) - [Legal and privacy](https://www.figma.com/legal/) - [Privacy Policy](https://www.figma.com/legal/privacy/) - [Modern slavery statement (UK)](https://static.figma.com/uploads/160c9cb21d6020c9eacaff67ac1450eb05d48c3b) - [Impressum](https://www.figma.com/legal/impressum/) - [Climate disclosure statement](https://static.figma.com/uploads/3920b4eb845c36faafa7706eba7c338036471161) ## Company - [Events](https://www.figma.com/events-and-webinars/#upcoming-events) - [Customers](https://www.figma.com/customers/) - [Careers](https://www.figma.com/careers/) - [Newsroom](https://www.figma.com/newsroom/) - [Investors](https://investor.figma.com/) - [Figma Ventures](https://www.figma.com/ventures/) English - [English](https://www.figma.com/color-wheel/?context=localeChange) - [Deutsch](https://www.figma.com/de-de/farbkreis/?context=localeChange) - [Español (España)](https://www.figma.com/es-es/circulo-cromatico/?context=localeChange) - [Español (Latinoamérica)](https://www.figma.com/es-la/circulo-cromatico/?context=localeChange) - [Français](https://www.figma.com/fr-fr/roue-chromatique/?context=localeChange) - [Italiano](https://www.figma.com/it-it/ruota-colore/?context=localeChange) - [Nederlands](https://www.figma.com/nl-nl/kleurenwiel/?context=localeChange) - [Polski](https://www.figma.com/pl-pl/kolo-kolorow/?context=localeChange) - [Português (Brasil)](https://www.figma.com/pt-br/circulo-cromatico/?context=localeChange) - [日本語](https://www.figma.com/ja-jp/color-wheel/?context=localeChange) - [한국어](https://www.figma.com/ko-kr/color-wheel/?context=localeChange)

Imagine you’ve poured your heart into crafting a beautiful, captivating design. You've nailed the layout, the typography feels just right, but something feels off. The [colors](https://www.figma.com/colors/) just aren't clicking. In the world of design, color choices are not just about aesthetics. Color can guide viewers through your project, evoke emotions, tell stories, and, ultimately, create an experience. Choosing the right colors can make the difference between a clear, engaging project and one that leaves viewers confused or disoriented. But with a vast spectrum of colors at your fingertips, how do you ensure you're picking the right ones and combining them effectively? Enter the color wheel — a timeless, powerful tool for crafting harmonious color palettes that elevate your designs every time.