Likey likey? Subscribe! - My answer for today's question: I've almost never used a color scheme tool for assistance. I've always gone off intuition, and sometimes I would browse UI galleries for general ideas. I might just start using Coolors though.
I really disliked the use of colors until the point that you changed both colors to the teal color. That fixed my brain and I instantly saw what you were going for if that makes sense...
"When picking color schemes, do you use a tool or pick them all by yourself?" I usually use a tool for that purpose. I'm awful to choose color design. I'm a backend software developer trying to be independent. I like so much to code frontend but i'm no soo good (yet). It's a work in progress but with your help I will reach it! (rusty english, sorry)
I would disagree with your choice of red on the login button. You mentioned colour psychology in the beginning of this video, and red is pretty negative in that aspect IMO. Like a "danger" or "cancel" button. Wouldn't want that on a button that should attract users. I liked the green/teal colour you showed first better.
So many comments on colour! I think it would’ve been ideal to have a scheme that was thought out before in terms of primary and secondary colours etc, some brands may even have an orange as a primary colour for example.
16:30 think that's my favorite set of colors. Quick question guys, I've never used any prototyping software (I'm focusing on learning Javascript, not design at the moment) and since these kinds of videos rarely show "what comes next", I've always wondered whether they do any coding for you at all? Or is it purely a sketching software to help you plan before the actual implementation, but you still have to write all the HTML/CSS yourself?
These prototype softwares are for design and planning purposes only. In Figma (another design software), it will give you a small piece of code (CSS) depending on the component you have selected. For example, if you make a rectangle with a small border-radius, Figma will give you the CSS that makes that button. So yes, you still have to write all the HTML and CSS.
I use tools like Adobe Colors, Site Palette and Coolors. But a good tip for monochrome color palette is to take ONE color, convert from RGB or HEX to HSB. Keep the H which is the HUE change the S which is the SATURATION and the B or L which are Brightness or Light. So 6 colors with a HUE 270 (a nice purple), 1st would be @ (white for font in a dark background), 2nd is HUE (270) SAT (1%) B (97%) Hex of this color is @ (very light purple, ideal for background and fonts), 3rd color would be HSB(270, 15%, 100%) HEX @, this could be an secondary accent color, because it's light, it can be used in few sub titles, 4th color would be an darker purple with higher saturation for the Primary accent color, ideal for call to action, that I would be HSB(270, 60%, 80%) the S can be 45% to 85%, I prefer 50 to 60% to be honest... HEX is @. the 5th color would be a dark but low saturated one for background in a hero, for substitles, dark mode, or navbar background color also, maybe some shapes... HSB(270, 25%, 50%), you can make S 20% to 30% as well or B 35% to 55% also...HEX @... last one is very dark @, which is S 50% and B 20%. Which is...
...ideal for background in a dark mode, or fonts for light mode. Now with this palette with HUE 270, we basically changed the S and B only for 0% 100% for the white and for the others H: 270 - S: 1% B:97%. S15% B100%, S60% B80%, S25% B50%, S50% B20%. If you are going to use BLACK avoid the #000000, with white, this very distant contrast cause eye fatigue. Instead of #000000 (H:0 S:0% B:0%) better would be #303030 (B:19), #202020 (B:13) or even #141414 (B:08), in another words, keep H and S zero and B goes from 8 to 20%. Some people like to use black black, the #000000 one, in this case, white would be #F1F1F1 (B:95%) for example, instead of the #FFFFFF (H:0 S:0 B:100% ), or even the #E6E6E6 (B:90%).... Good also to build your 1st portfolio of design or developer, before having your first real client, using simple clones or redesign the brands from your region. For example, Starbucks. You take their logo, take the most important color, which is green (the HUE of that green is 159), so you take this 6 color palette and just change the H:270 for H:159, and build mock websites, clone their website with a slightly redesign concept change and use as your first portfolio. :) I hope I could help with something... Good luck guys!
I thought this was going to be about actually using it in a web.... in CSS. I created 3 themes based on a doc site I saw: light, dark and sepia. I used CSS's var to make the switch and local storage to maintain it between page changes. I can use the new and latest in our company because I can have Chrome as the app to use.
I don't really see how it matters if he sketched it out like this, or did it using code - the theory is just the same. Also, CSS doesn't have vars. LESS or Sass on the other hand.. :)
I think it should have been worded: "How to pick a color scheme palette for a project". When I read "How to apply... " I thought he would show how to code it. There are many ways it can be done just like you said, LESS or Sass. I was able to do it using CSS's var (yes, CSS has var). However, I'm always looking for better ways to do it.
Definitely off intuition BUT will use galleries or even a color tool as inspiration. This may be my inexperience with color schemes but usually the colors change somewhat over the course of a design.
thanks , I was knowing this tips but I never apply them , this video helped me like 100% really amazing and I get the idea very much clear , thanks and good luck
I use color tools if I need more inspiration. Even if I already know the colors that I want to use, the tools will always surprise me with a new color. This video reminded me of a video by Joseph from LearnSketch.com. The video is about organizing your colors for your project. It totally changed how I organize my work. Video: ua-cam.com/video/9S8LGdpNh4Q/v-deo.html&t
Likey likey? Subscribe! - My answer for today's question: I've almost never used a color scheme tool for assistance. I've always gone off intuition, and sometimes I would browse UI galleries for general ideas. I might just start using Coolors though.
I really disliked the use of colors until the point that you changed both colors to the teal color. That fixed my brain and I instantly saw what you were going for if that makes sense...
Teal with dark colors always works haha
I really appreciate and love this. from a basic mockup-ish to something amazing
"When picking color schemes, do you use a tool or pick them all by yourself?"
I usually use a tool for that purpose. I'm awful to choose color design. I'm a backend software developer trying to be independent. I like so much to code frontend but i'm no soo good (yet). It's a work in progress but with your help I will reach it!
(rusty english, sorry)
I would disagree with your choice of red on the login button. You mentioned colour psychology in the beginning of this video, and red is pretty negative in that aspect IMO. Like a "danger" or "cancel" button. Wouldn't want that on a button that should attract users. I liked the green/teal colour you showed first better.
I'd agree with you if the color were actually red, but the color I'm using is definitely more on the orange side of the spectrum. ;)
its a login, not a signup button, not a disaster if you use it. I preffer more blue color tho like this reply button on yt lol
Also, red can be effectively used for CTAs given the right context. Think about a gory first person shooter game.
@@DesignCourse Color is so subjective. Wish you could use CIE specifications like CIE Lab -- no ambiguity.
So many comments on colour! I think it would’ve been ideal to have a scheme that was thought out before in terms of primary and secondary colours etc, some brands may even have an orange as a primary colour for example.
16:30 think that's my favorite set of colors.
Quick question guys, I've never used any prototyping software (I'm focusing on learning Javascript, not design at the moment) and since these kinds of videos rarely show "what comes next", I've always wondered whether they do any coding for you at all? Or is it purely a sketching software to help you plan before the actual implementation, but you still have to write all the HTML/CSS yourself?
only sketching, some software can help by spitting out css. there is also software that can produce html & CSS but the code it produces is GARBAGE
These prototype softwares are for design and planning purposes only. In Figma (another design software), it will give you a small piece of code (CSS) depending on the component you have selected. For example, if you make a rectangle with a small border-radius, Figma will give you the CSS that makes that button.
So yes, you still have to write all the HTML and CSS.
In that case, this kind of software should be used for sketching purpose only, got it! Thanks a lot :)
I use tools like Adobe Colors, Site Palette and Coolors. But a good tip for monochrome color palette is to take ONE color, convert from RGB or HEX to HSB. Keep the H which is the HUE change the S which is the SATURATION and the B or L which are Brightness or Light. So 6 colors with a HUE 270 (a nice purple), 1st would be @ (white for font in a dark background), 2nd is HUE (270) SAT (1%) B (97%) Hex of this color is @ (very light purple, ideal for background and fonts), 3rd color would be HSB(270, 15%, 100%) HEX @, this could be an secondary accent color, because it's light, it can be used in few sub titles, 4th color would be an darker purple with higher saturation for the Primary accent color, ideal for call to action, that I would be HSB(270, 60%, 80%) the S can be 45% to 85%, I prefer 50 to 60% to be honest... HEX is @. the 5th color would be a dark but low saturated one for background in a hero, for substitles, dark mode, or navbar background color also, maybe some shapes... HSB(270, 25%, 50%), you can make S 20% to 30% as well or B 35% to 55% also...HEX @... last one is very dark @, which is S 50% and B 20%. Which is...
...ideal for background in a dark mode, or fonts for light mode. Now with this palette with HUE 270, we basically changed the S and B only for 0% 100% for the white and for the others H: 270 - S: 1% B:97%. S15% B100%, S60% B80%, S25% B50%, S50% B20%. If you are going to use BLACK avoid the #000000, with white, this very distant contrast cause eye fatigue. Instead of #000000 (H:0 S:0% B:0%) better would be #303030 (B:19), #202020 (B:13) or even #141414 (B:08), in another words, keep H and S zero and B goes from 8 to 20%. Some people like to use black black, the #000000 one, in this case, white would be #F1F1F1 (B:95%) for example, instead of the #FFFFFF (H:0 S:0 B:100% ), or even the #E6E6E6 (B:90%).... Good also to build your 1st portfolio of design or developer, before having your first real client, using simple clones or redesign the brands from your region. For example, Starbucks. You take their logo, take the most important color, which is green (the HUE of that green is 159), so you take this 6 color palette and just change the H:270 for H:159, and build mock websites, clone their website with a slightly redesign concept change and use as your first portfolio. :)
I hope I could help with something...
Good luck guys!
What are the ways of applying a colour scheme on apparel
Your contents are really awesome ❤️
I usually make a moodboard first to establish the theme of the website
i loved the one with dark grey background Very deliciously palletable ( I hope you get what i did there with palletable ;) )
I thought this was going to be about actually using it in a web.... in CSS. I created 3 themes based on a doc site I saw: light, dark and sepia. I used CSS's var to make the switch and local storage to maintain it between page changes. I can use the new and latest in our company because I can have Chrome as the app to use.
I don't really see how it matters if he sketched it out like this, or did it using code - the theory is just the same. Also, CSS doesn't have vars. LESS or Sass on the other hand.. :)
I think it should have been worded: "How to pick a color scheme palette for a project". When I read "How to apply... " I thought he would show how to code it. There are many ways it can be done just like you said, LESS or Sass. I was able to do it using CSS's var (yes, CSS has var). However, I'm always looking for better ways to do it.
Is picking color as arbitrary as what looks good to the designer?
@@alexanderzerka8477 Whats a good resource?
Definitely off intuition BUT will use galleries or even a color tool as inspiration. This may be my inexperience with color schemes but usually the colors change somewhat over the course of a design.
thanks , I was knowing this tips but I never apply them , this video helped me like 100% really amazing and I get the idea very much clear , thanks and good luck
I'm a lazy person, so.. this helped me a lot! Thank you!
Thank you for the tutorial. Can you make a video on creating a color palette using the AI-powered photo editing platform autoRetouch?
Great content as always Gary you rock!
PS: i pick them without a tool
i use tools the work off them,sort of like what you did in the video
Can you make a video about breadcrumbs
thank you ! its a good toutorial
thank you very much bro
I had to hunt this video down because i received valuable info and forgot to subscribe. Yo thanks.
I use the tools that you have suggested
Do you have a similar video on applying a color palette to something like a landing or sales web page?
I almost always go off intuition.
Great video 👌
Good Job Dear
Thank you! 😊
I use color tools if I need more inspiration. Even if I already know the colors that I want to use, the tools will always surprise me with a new color.
This video reminded me of a video by Joseph from LearnSketch.com. The video is about organizing your colors for your project. It totally changed how I organize my work.
Video: ua-cam.com/video/9S8LGdpNh4Q/v-deo.html&t
you are the very best
Hey can i steal that
I hear someone whipped at 1:19
good
I watch this at 2x speed
I give thumbs down for the colors combination but in general I like the tutorial.
Waste of time for nothing...... Choose whatever color you ilke and apply it to the design. Will look great definitely look better than this design.
watching this video on 18th Sept 2019 lol
lol
watching this video on 19th Sept 2019 lol
this is not a very effective way