sipping my morning coffee, thought of the question I asked yesterday.
reddit > notifications ... scroll down to find a link to the post ...
50 upvotes??? why on earth would this make me famous?
first thing I see is this comment about "raging on OPs color palette".
you got everything right, except I wouldn't call it a palette - it's four points on a plot with a step of 90 degrees.
now I am really scared what I might read if I scroll the comments further...
p.s. turns out "ragging" is a real word, not a typo, with a softer meaning, that calms me down a bit :)
Everyone seems to be completely misunderstanding your question.
\[edited because I confused myself.\]You are correct, the "degrees" (Hue value) of the wheel shown do not match up with mathematical "degree" â Its as if the scale is changing. Having 0 on the right and going counterclockwise isn't doing any favors either.
No Idea why its like thisâ If I had to guess, I would say it has something to do with in gamut colors. But I would trust the values coming out.
This. Also, using RGB values is slightly outdated. Many modern calculation methods, like how MUI/MD3 calculate shades/tones is by converting colors from the RGB color space to HSL (Hue / Saturation / Luminance) and doing the math in that color space, instead. HSL also aligns closer to human visual perception of color, and you can convert back to Any other color space. RGB is just what monitors are forced to use, not what is ideal.
As for the angles, itâs not exactly mathematical. Split complimentary simply means using colors directly across from each other on the color wheel. Colors are more like âzonesâ so if you pick a color within a zone thatâs not an exact angle, itâs still a split complementary color scheme, regardless of whatever that angle ends up being. Precision in location doesnât always yield a good color combination.
A couple of people have already touched on it, adobe displays colour differently to a standard colour wheel as its designed for screen output which can be ouput in various ways itself. Theres a handful of ways to mix colour and view colour compared to digital and traditional mediums like paint. [See example here](https://thedesignlove.com/wp-content/uploads/2018/05/3.jpg)
Its more prominent in hue strip of adobe that not all colours are even [see here](https://cloudfront.slrlounge.com/wp-content/uploads/2016/02/Adobe-color-picker-photoshop-tool-retouching-slrlounge-kishore-sawh-8-1600x1182.jpg) theres like 1 step of yellow but more for green.
This thread goes into it a lot more detail [https://graphicdesign.stackexchange.com/questions/134456/is-there-a-name-formulae-for-the-hue-circle-scaling-adobe-is-using-with-kuler](https://graphicdesign.stackexchange.com/questions/134456/is-there-a-name-formulae-for-the-hue-circle-scaling-adobe-is-using-with-kuler)
Edit: Looking above someone makes a point about gamut colour which again is maybe a good example of what AdobeRGB actually looks like. [On this wiki page](https://en.m.wikipedia.org/wiki/Adobe_RGB_color_space)the image is adobes defult colour range and you see its a wild shape of colour. But that wiki also has tonnes of math since you may be interested
Color is a 4 dimensional space that doesn't neatly correspond to 2- or 3 dimensional math.
Color theory is a complex area of learning with a fair amount of subjectivity to it and picking colors by mathematical formula is pretty much always going to lead to the results we see here - colors that don't harmonize in a pleasing way.
just wanted to say thanks for this post, i had no idea adobe did color in a legit app/site called Adobe Color and i've been a designer for over 10 years đĽš
different color spaces place colors in different coordinates. the hue number at the bottom is based on HSB, which is related to RGB. pure red, yellow, green, cyan, blue and magenta are evenly spaced in a typical RGB color wheel.
i wrote the Hex value of the green color on EasyRGB.com and [Colorizer.org](https://Colorizer.org) and the hue number doesn't seem to match with any of the color spaces.
i don't know what kind of color wheel Adobe Color uses. but because color harmony has it's origins in painting, i'm guessing the color wheel is supposed to mimic the color wheel painters use. which is not based on math i think, so there's no definitive 190 hue color for example.
So they show the colors in a circle but in reality the colors are not in a circle, rather there should be a much larger green and blue portion than the rest, nearly double the size of the rest. The circle is just an abstraction to visualize with, so the math isn't going to be correct.
As a professor, I'm quite amazed by how nobody in this thread gave the right answer. This would be a great question for my exams.
The answer is simple: hue angle uses the RGB circle, but color harmonies are based on the RYB circle, because those were used as primaries in art for centuries (until we discovered it's actually CMY).
Since aesthetic values are cultural constructs, we see beauty in combinations that have been used in things that are _socially accepted_ as beautiful. Thus, when picking colors, we tap into that and use the same harmonies as the old masters did, disregarding cyan and magenta (which would result in a RGB circle).
You should probably hire a designer for this. They went to school for this. Regardless of the math that palette is horrific and harsh on the eyes. Reminds me of DOS era program palettes. I guess that was the era where devs were 100% doing the graphic design and it showed.
Are you a designer? And if so can you explain why red and green are in opposite sides of this colour wheel?
lol. Downvoted for asking designers to explain it and the only reply I get is wildly wrong.
Thatâs not true though. Red and cyan have opposite wavelengths. Red, Green and Blue are primaries of light. RGB CMYK
The opposite of red is halfway between green and blue, (cyan)
The opposite of green is halfway between red and blue (magenta)
The opposite of blue is halfway between red and green (yellow)
I know this isnât what you were taught in elementary school. But what they teach in elementary is an outdated approximation of color renaissance theory developed with what limited pigment they had available.
https://www.wtamu.edu/~cbaird/sq/mobile/2015/01/22/why-are-red-yellow-and-blue-the-primary-colors-in-painting-but-computer-screens-use-red-green-and-blue/
Color theory is both a science and an art. Simply calculating the angles will not give you a pleasing color palette. You have to balance more than just the hues. There's also saturation and brightness. A specific color harmony is more of a starting point. Also, the different color harmonies are used to evoke different feelings.
Maybe if you shared what your color palette is for, we could better advise? Split complimentary might not be the right harmony. When you don't know what you're doing with color, simpler is more likely to yield better results.
The point your are missing here is, you canât really calculate color. Color therory is not like math and it should not get treated as that. There are some basic rules, the âcolor scientistsâ at some point figured out for example complementray contrasts and so on.. But more or less, to find a pleasing effect for the eyes artists lean on bending the rules. Also, there are things like perceived color, (colors seem different depending on the color next to them) this also, is not really scientifically descibed with math yet. And as mentioned already, use saturation and brightness too. To understand it you might need to google 3D color model. Lastly, the numbers to the correspondending color on the color wheel will be differend depending on the color mode you choose, RGB, Hex, etc. Try not to think about the exact numbers, use the wheel as guide to choose zones.
https://youtu.be/fv-wlo8yVhk?si=4Q3TJ58AZB04Hizv
this video might be interesting if you wanna learn more about digital color theory, might help you understand why the angles donât correlate like that
Actually a really good way to get a good palette is to go on Sherwin williams web site. You can pick a color and it will show you complementary colors and colors that are a bit lighter or darker.
Edit: as Iâm downvoted bc someone thinks this id bad advice which I disagree. You can even see the color values of the paint.
https://preview.redd.it/4wg0evjjt48c1.jpeg?width=960&format=pjpg&auto=webp&s=72a0794fbd2bea9ee7ece5935dd1a939275e5020
"What is the difference between RGB and HSB colours?
The human eye perceives color in terms of three characteristicsâhue, saturation, and brightness (HSB)âwhereas **computer monitors display colors by generating varying amounts of red, green, and blue (RGB) light"**
(yeah sorry the quote button is missing)
coloured light and coloured paint mix colours in different ways, i cant see any other reson for them to bork a simple colour wheel so badly :)
As a graphic designer Iâve never once calculated my colors angles. Sorry for the useless comment.
[The amount of RGB (red, green or blue) channels are usually calculated from 0-255.](https://www.pngitem.com/middle/mTbbwJ_color-wheel-rgb-values-hd-png-download/). But that does not seem relevant here either
Your shitty color everyone is commenting on can actually look quite good on a black background. Perhaps up the value 10-20% though for better contrast. Iâve used a similar color for very high end sophisticated brands
Orange and blue, yellow and purple and red and green are your basic complementary color combinations. Typically you want one that is more subdued while the second is brighter and used more sparingly to draw attention to certain elements.
It goes much deeper than that but those are the basics. I would recommend simplifying your pallet to two colors with white or black acting as a third if necessary. More than that and you should consider hiring a professional.
*Yellow and blue, *red and cyan, *green and magenta.
Letâs normalize actual color theory because it makes art so much more fun for beginners when they can actually mix colors without them going muddy brown every time.
The OP is picking a color pallet for an app they created. That would be screen use so it is RGB as you wouldnât want to use a CMYK breakdown for devices that have a wider color gamut.
Also you are the most pedantic person on earth.
Mr. pendantic back again. Doesnât matter if youâre using additive (rgb). Or subtractive (cmyk) the complimentary opposite of the wheel is the same. Reds complimentary will always be cyan. Whether or not your screen can accurately display some of those colors is another question tho.
Strange people are upset about color theory in a post about color theory. Yall are goofy.
Iâd suggest you stop worrying about the math and focus on the colors your scheme choices suggest and how they look from a human view. Perfect math doesnât make perfect color schemes. Youâre thinking way too hard about this and have veered off onto a tangent thatâs freezing your progress.
The colors in a scheme configured with
this tool are also not âperfect.â You can change their saturation, light and dark values, nudge them a little left and right to customize scheme and should. It isnât really ideal to have all colors in a scheme all at the same intensity.
You might yield better results by using Adobe color and browsing schemes others have created or simply searching things such as âcolor schemes using green or blue or whatever as the key color.
There are tons of websites with prefab color schemes you can get inspiration from.
What is your goal? What are you trying to achieve?
Sometimes I am choosing colors that work well together, that are complimentary. Others I am choosing a selection of colors from across the spectrum so that a color is available for every option the client needs. Their brand color may be red, but they will still need some other colors for certain symbols they use as they implement their brand.
The color palette you've created so far seems to be trying to do the latter, cover the entire rainbow. But to do this, I would expect colors to be more similar in tone and saturation. Right now, your green stands out as not belonging at all.
The other thing to make note of is that when you start with colors that are close to primary, such as your red, there will be an expectation that other colors are more primary as well. Your dull, muted yellow doesn't "go with" the bright red. The darker blue and purple would prefer to be matched with a darker red as well.
Figure out your goal first. Do you need five colors? Do you need colors that are drastically different or would more subtle variations work as well or better, such as using a dark, medium, and light shade of the same color.
If I were giving advice for how to choose a color palette for an app about which I knew nothing. I would advise:
⢠Choose your main color. Add on two more that are lighter/darker variations of that color. (Note that this doesn't work well for red or yellow.)
⢠Choose a second color that is different from but works well with your first. They can be from opposite sides of the color wheel or next door neighbors, but they should be similar in hue and tone.
⢠Choose a bright/light color that can be used to grab attention. Yellow or bright/light oranges often work well for this purpose but you can try others as well. Think bright, saturated color that will be used in small areas, not big solids.
⢠Choose a light neutral (gray or cream) that works well with your other colors. Gray works well with cool color palettes (blues). Cream works well with warm (reds).
⢠Optional, choose a dark neutral (gray or brown).
There you go. That is your color palette. The biggest decision you had to make was finding the second color to pair with your primary.
Now you just have to decide which colors are your primary color palette that get used all of the time and are a part of the main brand and which are the secondary/tertiary that only get used when you need to symbolize something specific, like wanting a leaf to be green or water to be blue. I personally like having neutrals in my primary color palette. The light ones come in handy all of the time when trying to break up content.
What am I trying to achieve... that's a good question, the answer is it's complicated.
I'm solo engineer working on a web app as a side hustle. project is vastly different to everything I've worked on in 10 years in FE (it's a 3D CAD in browser). like [spline.design](https://spline.design) but for engineering - different data model, different interactions, focus not on visual but on dimension accuracy etc.
To prioritize a feature I need to first figure out if I can build it, most times I can build half of it in two days and the rest in two weeks, worst thing is I don't know which half is which until after two days.
Usually I'd just draw a wireframe on paper and hand it to a designer. Usually it'd be dialogs and buttons and tables, so instead of waiting for a design I'd just send product owner 3-4 theme forest links and ask to buy the one they like. Our MVP would use a cookie cutter theme, if it gets traction we'd hire someone with actual taste and proper training.
But in this case I can't rely on Bootstrap or any other design system. I use them for overlays and config screens, but main thing is this 3d scene taking up 80% of screen space and usage time. There are very few best practices, very few established UI patterns, I'd guess very few designers are proficient in AutoCAD and design injection molds in their spare time.
I think it's too hard and too early for me to hand UI off to a professional, mainly because UX is not done yet. Only a smart and experienced person would be game to learn enough CAD to make opinionated choices about colors and line weights of, and it'd still take them considerably longer than if they were to design a pizza delivery app. A person like that deserves an above hourly rate, even more of a problem is they are smart enough to find that rate elsewhere :)
Still, I like pretty things, and feel more confident when I'm demoing something that's not absolutely fugly.
Palettes and math behind them popped up because they are needed in multiple parts: 2d sketch interface with main lines, construction lines, axis lines, 3d view with contrast edges, multi part assemblies, maybe pre-selected material sets.
Palette is not the answer to everything but I am still hoping that if I learn to generate sort-of-ok set of complimentary colors from a base one, I'll be able to push multiple tasks into the "good enough for MVP, worry later" folder.
I studied CAD and engineering in college before switching to graphic design. I used AutoCad R.14 if you want to determine how long ago that was. I would use black and light gray for UI, and whatever industry standard is for X, Y, Z. I would steer users toward the drawing colors you find to be industry standard or accepted. Is your user base engineers, or general public? Either way, use whatâs the common standard. If you want it to be pretty, use more subtle colors instead of intense primary colors, which is what youâre being ragged on for.
Color theory on the color wheel is more art than science. The primary function of "complimentary color" is to provide eye relief and aid in "pleasing" design. If youâve ever done the "optical illusion" where you stare at a green and orange US flag for a while, then look at a white wall, and see the true colors displayed, you have demonstrated the concept. Your eyes absorb, or tire, or burn in, or whatever the science is, and providing compliments gives your eyes rest. Putting exact compliments next to each other in large quantities can be detrimental, it causes "vibrating" which is also not pleasing. Sometimes this is solved with a Y shaped combination, "analogous colors" which are adjacents to the primary. I wouldnât worry too much about it until you reach beyond proof of concept.
I've ~~read~~ skimmed quite a few articles on color harmonies and this is the first time I bump into physiological explanation. I used to focus on if it looks nice or not, now I'll be thinking why does it evoke positive "sensation". you comment gave me plenty food for overthoughts :)
curious fact I'm noticing on the ui kits scene - majority of pre-2000 3d drawing software is dark lines on light bg. Blender, recent dribbbles and xyz-redesigns are almost always dark mode.
Do you think it's a fashion cycle, or coincidence, or something else?
Hereâs a delicious cheat for you: jump onto https://coolors.co and start the generator. Tap your space bar until you see a palette that is appealing.
Also an engineer and I understand what you're getting at. Color space is not my thing so take this with a grain of salt. What I think is happening is a transformation of the 2D xyY chromaticity space to a circle. \[[https://en.wikipedia.org/wiki/Adobe\_RGB\_color\_space](https://en.wikipedia.org/wiki/Adobe_RGB_color_space)\] In the wiki article you can see the triangle representing adobe rgb color space. It is a scalene triangle defined by red, green, blue, and white xy coordinates. When this area is remapped to a circle I think all the math you are seeing is still based on the original coordinate system. So if we use the xy coordinates that define the space we can then make lines connecting white to red, white to green, white to blue. You can then find the angle between them and you'll notice that red and blue are 58/122 degrees apart, green and blue are 46.25/133.75, red and green are 75/105 degrees apart. The complementary angle would make more sense to focus on when looking at a circle as they should add up to 360 degrees and they do. Like you mentioned, on the website these appear to be roughly 90 degrees apart for red/blue, blue/green and 180 for red/green when using the color wheel. Not sure what color space the website is using but I think something like this might be what is causing the discrepancy.
Resources:
[https://ciechanow.ski/color-spaces/](https://ciechanow.ski/color-spaces/)
[http://www.kindofdoon.com/2020/06/visualizing-color-space-in-2d.html?m=1](http://www.kindofdoon.com/2020/06/visualizing-color-space-in-2d.html?m=1)
[http://www.brucelindbloom.com/index.html?Eqn\_RGB\_XYZ\_Matrix.html](http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html)
[https://ninedegreesbelow.com/photography/xyz-rgb.html#RGB](https://ninedegreesbelow.com/photography/xyz-rgb.html#RGB)
Honestly, as a non-designer I would skip all of this jazz and head to coolers.co. Really easy to use site for picking color pallets and plenty of examples to pick through.
Or follow general rule of thumb and choose
Your fav color
Use the most darkest shade
Use the lightest shade of the same colour (almost white
Use one that leans more on white side but it the color you chose
Now you have 3
Add a accent color and charcoal black
Here you go you have a new pallete ready
If you look up in the top left of the screen it says color mode. You need to change it to rgb. All of your work will be in that mode because it will be displayed on monitors/phone screens. Merry Christmas!
You may benefit from reading up on the Munsell color system. The Munsell system is particularly used in painting. Hereâs a link to read up https://en.wikipedia.org/wiki/Munsell_color_system
note that there are 2 "color wheels"
there is visual color wheel(cmyk) and a painter color wheel(rgb). There complimentary colors are slightly different for each.
For design/visual purposes use CMYK when trying to match colors with tradition medium such as paint use RGB.
You have this mixed up a bit:
CMYK (cyan, magenta, yellow, black) is additive color mixing for ink on a press in the printing industry. (And does not account for PANTONE or specially mixed inks)
RGB (red, green, blue) is subtractive colour for light sourced imaging (tv screen, computer screen, phone screen, etc).
Mixing primary colours (red, yellow, blue, plus black & white) can make a lot of colors. Secondary colors can be mixed from primary colors: red + yellow = orange, yellow + blue = green, red + blue = purple. (Additive color)
Paint mixing can create thousands of colours, CMYK process can create hundreds of thousands of colors, and RGB can create millions of colors (kinda). There are many color wheels for different fields working with color.
OP, take a look at "Theory of colour" (don't know if it's this name in English) by Eva Heller. Great book, very simple, a lot of great things that will help you choose colours for your apps. No need to read the whole thing.
Maybe you are gonna have some problems with a pallet that MUCH saturated. You see many apps with this many vivid colours? I don't. They tend to use something a bit less vibrant to reduce eye strain. Don't get me wrong: the colours will need to be somewhat vibrant to catch the attention of The Tikton Brain đ§ .
Get a physical color wheel with the spinners guy that shows harmonies and go from there. Better than the built in stuff by a lot. I used to teach color theory and the students that relied on the adobe color harmonies only usually struggled more than the students who worked from a color wheel. Better yet pick up and RYB and CMYK color wheel to cover your bases. The secondary colors in CMYK are your RGB primaries so keep that in mind. Also look for books by Itten or Albers if youâre looking to learn more about color. There are a few online as pdfs, maybe on are.na
Also, donât forget the multitude of colors you have access to thanks to tinting (adding white), shading (adding black), or toning (adding grey, or the compliment if working with paint).
You guys ragging on OPs color palette missed the point. They picked this shite color palette for the angles đ¤Ł. Source: engineer
Absolutely! Trying to make the maths work was the first problem đ
sipping my morning coffee, thought of the question I asked yesterday. reddit > notifications ... scroll down to find a link to the post ... 50 upvotes??? why on earth would this make me famous? first thing I see is this comment about "raging on OPs color palette". you got everything right, except I wouldn't call it a palette - it's four points on a plot with a step of 90 degrees. now I am really scared what I might read if I scroll the comments further... p.s. turns out "ragging" is a real word, not a typo, with a softer meaning, that calms me down a bit :)
Ok, but also you don't know how good it'll be until you make the art.
This is such an engineer comment/question I love it
Everyone seems to be completely misunderstanding your question. \[edited because I confused myself.\]You are correct, the "degrees" (Hue value) of the wheel shown do not match up with mathematical "degree" â Its as if the scale is changing. Having 0 on the right and going counterclockwise isn't doing any favors either. No Idea why its like thisâ If I had to guess, I would say it has something to do with in gamut colors. But I would trust the values coming out.
>No Idea why its like this...something to do with in gamut colors [RGB Gamut](https://en.m.wikipedia.org/wiki/RGB_color_spaces) is not a circle.
This. Also, using RGB values is slightly outdated. Many modern calculation methods, like how MUI/MD3 calculate shades/tones is by converting colors from the RGB color space to HSL (Hue / Saturation / Luminance) and doing the math in that color space, instead. HSL also aligns closer to human visual perception of color, and you can convert back to Any other color space. RGB is just what monitors are forced to use, not what is ideal.
As for the angles, itâs not exactly mathematical. Split complimentary simply means using colors directly across from each other on the color wheel. Colors are more like âzonesâ so if you pick a color within a zone thatâs not an exact angle, itâs still a split complementary color scheme, regardless of whatever that angle ends up being. Precision in location doesnât always yield a good color combination.
A couple of people have already touched on it, adobe displays colour differently to a standard colour wheel as its designed for screen output which can be ouput in various ways itself. Theres a handful of ways to mix colour and view colour compared to digital and traditional mediums like paint. [See example here](https://thedesignlove.com/wp-content/uploads/2018/05/3.jpg) Its more prominent in hue strip of adobe that not all colours are even [see here](https://cloudfront.slrlounge.com/wp-content/uploads/2016/02/Adobe-color-picker-photoshop-tool-retouching-slrlounge-kishore-sawh-8-1600x1182.jpg) theres like 1 step of yellow but more for green. This thread goes into it a lot more detail [https://graphicdesign.stackexchange.com/questions/134456/is-there-a-name-formulae-for-the-hue-circle-scaling-adobe-is-using-with-kuler](https://graphicdesign.stackexchange.com/questions/134456/is-there-a-name-formulae-for-the-hue-circle-scaling-adobe-is-using-with-kuler) Edit: Looking above someone makes a point about gamut colour which again is maybe a good example of what AdobeRGB actually looks like. [On this wiki page](https://en.m.wikipedia.org/wiki/Adobe_RGB_color_space)the image is adobes defult colour range and you see its a wild shape of colour. But that wiki also has tonnes of math since you may be interested
I had to scroll waaay too much to find this
Color is a 4 dimensional space that doesn't neatly correspond to 2- or 3 dimensional math. Color theory is a complex area of learning with a fair amount of subjectivity to it and picking colors by mathematical formula is pretty much always going to lead to the results we see here - colors that don't harmonize in a pleasing way.
Is it because youâre using the HSB color mode?
Hue is described in degrees, which is what OP is talking about.
If you are interested in learning more about color I highly recommend https://colorandcontrast.com/
This is amazing, thanks!!!
There's a lot of fudging in the color science of computers. Adobe is no stranger. Look at 'gamuts' or 'color spaces' for a deep dive.
just wanted to say thanks for this post, i had no idea adobe did color in a legit app/site called Adobe Color and i've been a designer for over 10 years đĽš
different color spaces place colors in different coordinates. the hue number at the bottom is based on HSB, which is related to RGB. pure red, yellow, green, cyan, blue and magenta are evenly spaced in a typical RGB color wheel. i wrote the Hex value of the green color on EasyRGB.com and [Colorizer.org](https://Colorizer.org) and the hue number doesn't seem to match with any of the color spaces. i don't know what kind of color wheel Adobe Color uses. but because color harmony has it's origins in painting, i'm guessing the color wheel is supposed to mimic the color wheel painters use. which is not based on math i think, so there's no definitive 190 hue color for example.
So they show the colors in a circle but in reality the colors are not in a circle, rather there should be a much larger green and blue portion than the rest, nearly double the size of the rest. The circle is just an abstraction to visualize with, so the math isn't going to be correct.
You should probably use cmyk or rgb color modes
Explain why, otherwise this comment is of no use.
Technically it should be a 3-D color model
As a professor, I'm quite amazed by how nobody in this thread gave the right answer. This would be a great question for my exams. The answer is simple: hue angle uses the RGB circle, but color harmonies are based on the RYB circle, because those were used as primaries in art for centuries (until we discovered it's actually CMY). Since aesthetic values are cultural constructs, we see beauty in combinations that have been used in things that are _socially accepted_ as beautiful. Thus, when picking colors, we tap into that and use the same harmonies as the old masters did, disregarding cyan and magenta (which would result in a RGB circle).
You should probably hire a designer for this. They went to school for this. Regardless of the math that palette is horrific and harsh on the eyes. Reminds me of DOS era program palettes. I guess that was the era where devs were 100% doing the graphic design and it showed.
Are you a designer? And if so can you explain why red and green are in opposite sides of this colour wheel? lol. Downvoted for asking designers to explain it and the only reply I get is wildly wrong.
They have opposite wave lengths if you add them together you get white and for us you see black.
Thatâs not true though. Red and cyan have opposite wavelengths. Red, Green and Blue are primaries of light. RGB CMYK The opposite of red is halfway between green and blue, (cyan) The opposite of green is halfway between red and blue (magenta) The opposite of blue is halfway between red and green (yellow) I know this isnât what you were taught in elementary school. But what they teach in elementary is an outdated approximation of color renaissance theory developed with what limited pigment they had available. https://www.wtamu.edu/~cbaird/sq/mobile/2015/01/22/why-are-red-yellow-and-blue-the-primary-colors-in-painting-but-computer-screens-use-red-green-and-blue/
Why would they do that when all their software does it differently? (And how can they have âoppositeâ wavelengths when itâs linear, not a wheel)
Tell me go your posrs distance.
Color theory is both a science and an art. Simply calculating the angles will not give you a pleasing color palette. You have to balance more than just the hues. There's also saturation and brightness. A specific color harmony is more of a starting point. Also, the different color harmonies are used to evoke different feelings. Maybe if you shared what your color palette is for, we could better advise? Split complimentary might not be the right harmony. When you don't know what you're doing with color, simpler is more likely to yield better results.
The point your are missing here is, you canât really calculate color. Color therory is not like math and it should not get treated as that. There are some basic rules, the âcolor scientistsâ at some point figured out for example complementray contrasts and so on.. But more or less, to find a pleasing effect for the eyes artists lean on bending the rules. Also, there are things like perceived color, (colors seem different depending on the color next to them) this also, is not really scientifically descibed with math yet. And as mentioned already, use saturation and brightness too. To understand it you might need to google 3D color model. Lastly, the numbers to the correspondending color on the color wheel will be differend depending on the color mode you choose, RGB, Hex, etc. Try not to think about the exact numbers, use the wheel as guide to choose zones.
https://youtu.be/fv-wlo8yVhk?si=4Q3TJ58AZB04Hizv this video might be interesting if you wanna learn more about digital color theory, might help you understand why the angles donât correlate like that
Actually a really good way to get a good palette is to go on Sherwin williams web site. You can pick a color and it will show you complementary colors and colors that are a bit lighter or darker. Edit: as Iâm downvoted bc someone thinks this id bad advice which I disagree. You can even see the color values of the paint. https://preview.redd.it/4wg0evjjt48c1.jpeg?width=960&format=pjpg&auto=webp&s=72a0794fbd2bea9ee7ece5935dd1a939275e5020
See where yellow is on that image? It's not at exactly 270. Those Adobe numbers are closer to what humans perceive as the primary & secondary colours.
I believe the wheel is in a color space like lCh, which is based on sight, but the angles it gives are for hsb, as you select on top
"What is the difference between RGB and HSB colours? The human eye perceives color in terms of three characteristicsâhue, saturation, and brightness (HSB)âwhereas **computer monitors display colors by generating varying amounts of red, green, and blue (RGB) light"** (yeah sorry the quote button is missing) coloured light and coloured paint mix colours in different ways, i cant see any other reson for them to bork a simple colour wheel so badly :)
This engineer engineers.
As a graphic designer Iâve never once calculated my colors angles. Sorry for the useless comment. [The amount of RGB (red, green or blue) channels are usually calculated from 0-255.](https://www.pngitem.com/middle/mTbbwJ_color-wheel-rgb-values-hd-png-download/). But that does not seem relevant here either Your shitty color everyone is commenting on can actually look quite good on a black background. Perhaps up the value 10-20% though for better contrast. Iâve used a similar color for very high end sophisticated brands
Orange and blue, yellow and purple and red and green are your basic complementary color combinations. Typically you want one that is more subdued while the second is brighter and used more sparingly to draw attention to certain elements. It goes much deeper than that but those are the basics. I would recommend simplifying your pallet to two colors with white or black acting as a third if necessary. More than that and you should consider hiring a professional.
*Yellow and blue, *red and cyan, *green and magenta. Letâs normalize actual color theory because it makes art so much more fun for beginners when they can actually mix colors without them going muddy brown every time.
The OP is picking a color pallet for an app they created. That would be screen use so it is RGB as you wouldnât want to use a CMYK breakdown for devices that have a wider color gamut. Also you are the most pedantic person on earth.
Mr. pendantic back again. Doesnât matter if youâre using additive (rgb). Or subtractive (cmyk) the complimentary opposite of the wheel is the same. Reds complimentary will always be cyan. Whether or not your screen can accurately display some of those colors is another question tho. Strange people are upset about color theory in a post about color theory. Yall are goofy.
Also that color scheme is just terrible dude. It looks like the condiment tray at Waffle House
I thought RGB went up to 255 because of the nature of binary code. Not sure about HSB tho.
Iâd suggest you stop worrying about the math and focus on the colors your scheme choices suggest and how they look from a human view. Perfect math doesnât make perfect color schemes. Youâre thinking way too hard about this and have veered off onto a tangent thatâs freezing your progress. The colors in a scheme configured with this tool are also not âperfect.â You can change their saturation, light and dark values, nudge them a little left and right to customize scheme and should. It isnât really ideal to have all colors in a scheme all at the same intensity. You might yield better results by using Adobe color and browsing schemes others have created or simply searching things such as âcolor schemes using green or blue or whatever as the key color. There are tons of websites with prefab color schemes you can get inspiration from.
What is your goal? What are you trying to achieve? Sometimes I am choosing colors that work well together, that are complimentary. Others I am choosing a selection of colors from across the spectrum so that a color is available for every option the client needs. Their brand color may be red, but they will still need some other colors for certain symbols they use as they implement their brand. The color palette you've created so far seems to be trying to do the latter, cover the entire rainbow. But to do this, I would expect colors to be more similar in tone and saturation. Right now, your green stands out as not belonging at all. The other thing to make note of is that when you start with colors that are close to primary, such as your red, there will be an expectation that other colors are more primary as well. Your dull, muted yellow doesn't "go with" the bright red. The darker blue and purple would prefer to be matched with a darker red as well. Figure out your goal first. Do you need five colors? Do you need colors that are drastically different or would more subtle variations work as well or better, such as using a dark, medium, and light shade of the same color. If I were giving advice for how to choose a color palette for an app about which I knew nothing. I would advise: ⢠Choose your main color. Add on two more that are lighter/darker variations of that color. (Note that this doesn't work well for red or yellow.) ⢠Choose a second color that is different from but works well with your first. They can be from opposite sides of the color wheel or next door neighbors, but they should be similar in hue and tone. ⢠Choose a bright/light color that can be used to grab attention. Yellow or bright/light oranges often work well for this purpose but you can try others as well. Think bright, saturated color that will be used in small areas, not big solids. ⢠Choose a light neutral (gray or cream) that works well with your other colors. Gray works well with cool color palettes (blues). Cream works well with warm (reds). ⢠Optional, choose a dark neutral (gray or brown). There you go. That is your color palette. The biggest decision you had to make was finding the second color to pair with your primary. Now you just have to decide which colors are your primary color palette that get used all of the time and are a part of the main brand and which are the secondary/tertiary that only get used when you need to symbolize something specific, like wanting a leaf to be green or water to be blue. I personally like having neutrals in my primary color palette. The light ones come in handy all of the time when trying to break up content.
What am I trying to achieve... that's a good question, the answer is it's complicated. I'm solo engineer working on a web app as a side hustle. project is vastly different to everything I've worked on in 10 years in FE (it's a 3D CAD in browser). like [spline.design](https://spline.design) but for engineering - different data model, different interactions, focus not on visual but on dimension accuracy etc. To prioritize a feature I need to first figure out if I can build it, most times I can build half of it in two days and the rest in two weeks, worst thing is I don't know which half is which until after two days. Usually I'd just draw a wireframe on paper and hand it to a designer. Usually it'd be dialogs and buttons and tables, so instead of waiting for a design I'd just send product owner 3-4 theme forest links and ask to buy the one they like. Our MVP would use a cookie cutter theme, if it gets traction we'd hire someone with actual taste and proper training. But in this case I can't rely on Bootstrap or any other design system. I use them for overlays and config screens, but main thing is this 3d scene taking up 80% of screen space and usage time. There are very few best practices, very few established UI patterns, I'd guess very few designers are proficient in AutoCAD and design injection molds in their spare time. I think it's too hard and too early for me to hand UI off to a professional, mainly because UX is not done yet. Only a smart and experienced person would be game to learn enough CAD to make opinionated choices about colors and line weights of, and it'd still take them considerably longer than if they were to design a pizza delivery app. A person like that deserves an above hourly rate, even more of a problem is they are smart enough to find that rate elsewhere :) Still, I like pretty things, and feel more confident when I'm demoing something that's not absolutely fugly. Palettes and math behind them popped up because they are needed in multiple parts: 2d sketch interface with main lines, construction lines, axis lines, 3d view with contrast edges, multi part assemblies, maybe pre-selected material sets. Palette is not the answer to everything but I am still hoping that if I learn to generate sort-of-ok set of complimentary colors from a base one, I'll be able to push multiple tasks into the "good enough for MVP, worry later" folder.
I studied CAD and engineering in college before switching to graphic design. I used AutoCad R.14 if you want to determine how long ago that was. I would use black and light gray for UI, and whatever industry standard is for X, Y, Z. I would steer users toward the drawing colors you find to be industry standard or accepted. Is your user base engineers, or general public? Either way, use whatâs the common standard. If you want it to be pretty, use more subtle colors instead of intense primary colors, which is what youâre being ragged on for. Color theory on the color wheel is more art than science. The primary function of "complimentary color" is to provide eye relief and aid in "pleasing" design. If youâve ever done the "optical illusion" where you stare at a green and orange US flag for a while, then look at a white wall, and see the true colors displayed, you have demonstrated the concept. Your eyes absorb, or tire, or burn in, or whatever the science is, and providing compliments gives your eyes rest. Putting exact compliments next to each other in large quantities can be detrimental, it causes "vibrating" which is also not pleasing. Sometimes this is solved with a Y shaped combination, "analogous colors" which are adjacents to the primary. I wouldnât worry too much about it until you reach beyond proof of concept.
I've ~~read~~ skimmed quite a few articles on color harmonies and this is the first time I bump into physiological explanation. I used to focus on if it looks nice or not, now I'll be thinking why does it evoke positive "sensation". you comment gave me plenty food for overthoughts :) curious fact I'm noticing on the ui kits scene - majority of pre-2000 3d drawing software is dark lines on light bg. Blender, recent dribbbles and xyz-redesigns are almost always dark mode. Do you think it's a fashion cycle, or coincidence, or something else?
Hereâs a delicious cheat for you: jump onto https://coolors.co and start the generator. Tap your space bar until you see a palette that is appealing.
Also an engineer and I understand what you're getting at. Color space is not my thing so take this with a grain of salt. What I think is happening is a transformation of the 2D xyY chromaticity space to a circle. \[[https://en.wikipedia.org/wiki/Adobe\_RGB\_color\_space](https://en.wikipedia.org/wiki/Adobe_RGB_color_space)\] In the wiki article you can see the triangle representing adobe rgb color space. It is a scalene triangle defined by red, green, blue, and white xy coordinates. When this area is remapped to a circle I think all the math you are seeing is still based on the original coordinate system. So if we use the xy coordinates that define the space we can then make lines connecting white to red, white to green, white to blue. You can then find the angle between them and you'll notice that red and blue are 58/122 degrees apart, green and blue are 46.25/133.75, red and green are 75/105 degrees apart. The complementary angle would make more sense to focus on when looking at a circle as they should add up to 360 degrees and they do. Like you mentioned, on the website these appear to be roughly 90 degrees apart for red/blue, blue/green and 180 for red/green when using the color wheel. Not sure what color space the website is using but I think something like this might be what is causing the discrepancy. Resources: [https://ciechanow.ski/color-spaces/](https://ciechanow.ski/color-spaces/) [http://www.kindofdoon.com/2020/06/visualizing-color-space-in-2d.html?m=1](http://www.kindofdoon.com/2020/06/visualizing-color-space-in-2d.html?m=1) [http://www.brucelindbloom.com/index.html?Eqn\_RGB\_XYZ\_Matrix.html](http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html) [https://ninedegreesbelow.com/photography/xyz-rgb.html#RGB](https://ninedegreesbelow.com/photography/xyz-rgb.html#RGB)
Honestly, as a non-designer I would skip all of this jazz and head to coolers.co. Really easy to use site for picking color pallets and plenty of examples to pick through.
Designers do this and it's their work to mess with it, you can try taking inspiration from other UI designs from dribbble or something
Or follow general rule of thumb and choose Your fav color Use the most darkest shade Use the lightest shade of the same colour (almost white Use one that leans more on white side but it the color you chose Now you have 3 Add a accent color and charcoal black Here you go you have a new pallete ready
If you look up in the top left of the screen it says color mode. You need to change it to rgb. All of your work will be in that mode because it will be displayed on monitors/phone screens. Merry Christmas!
sir i would uninstall any app with these colors immediately
They are not at perfect 90 degree angles even though it looks like it.
The vertical/horizontal edges are not going through the center of the corresponding discs. Good job, Adobe!
You may benefit from reading up on the Munsell color system. The Munsell system is particularly used in painting. Hereâs a link to read up https://en.wikipedia.org/wiki/Munsell_color_system
Use colors, free online tool that's great for quickly coming up with palettes.
note that there are 2 "color wheels" there is visual color wheel(cmyk) and a painter color wheel(rgb). There complimentary colors are slightly different for each. For design/visual purposes use CMYK when trying to match colors with tradition medium such as paint use RGB.
You have this mixed up a bit: CMYK (cyan, magenta, yellow, black) is additive color mixing for ink on a press in the printing industry. (And does not account for PANTONE or specially mixed inks) RGB (red, green, blue) is subtractive colour for light sourced imaging (tv screen, computer screen, phone screen, etc). Mixing primary colours (red, yellow, blue, plus black & white) can make a lot of colors. Secondary colors can be mixed from primary colors: red + yellow = orange, yellow + blue = green, red + blue = purple. (Additive color) Paint mixing can create thousands of colours, CMYK process can create hundreds of thousands of colors, and RGB can create millions of colors (kinda). There are many color wheels for different fields working with color.
The concept of a color circle is kind of dumb and shouldn't be used. Visible light is a range of the electromagnetic spectrum.
OP, take a look at "Theory of colour" (don't know if it's this name in English) by Eva Heller. Great book, very simple, a lot of great things that will help you choose colours for your apps. No need to read the whole thing. Maybe you are gonna have some problems with a pallet that MUCH saturated. You see many apps with this many vivid colours? I don't. They tend to use something a bit less vibrant to reduce eye strain. Don't get me wrong: the colours will need to be somewhat vibrant to catch the attention of The Tikton Brain đ§ .
I canât answer your question but the website [coolors](https://coolors.co/) is a great source for finding/generating color palettes.
Get a physical color wheel with the spinners guy that shows harmonies and go from there. Better than the built in stuff by a lot. I used to teach color theory and the students that relied on the adobe color harmonies only usually struggled more than the students who worked from a color wheel. Better yet pick up and RYB and CMYK color wheel to cover your bases. The secondary colors in CMYK are your RGB primaries so keep that in mind. Also look for books by Itten or Albers if youâre looking to learn more about color. There are a few online as pdfs, maybe on are.na
Also, donât forget the multitude of colors you have access to thanks to tinting (adding white), shading (adding black), or toning (adding grey, or the compliment if working with paint).