Use AI & JavaScript to Generate Amazing Color Schemes
https://bit.ly/42szpiG 👈 Learn UI/UX and CSS Today. Use "UI2023" for 23% Off!
https://designcourse.com/af 👈 My upcoming "Advanced Frontends" Course
https://bit.ly/3ZLBchj 👈 Project files
-- Today, I'm going to show you 2 prompts (and some JavaScript) that will provide you with beautiful, accessible color schemes IN REAL TIME on your live website.
JavaScript file available here:
https://bit.ly/3ZLBchj
Prompt 1:
"I am going to provide you with the HTML and CSS for my project, and I need you to do the following:
1. Extract all color values from the CSS, and place them into the :root selector at the top of the file with CSS custom properties. This will be the "light mode" version of the design. You should extract these values from the following CSS properties: background, background-color, color, stroke, border, box-shadow, and fill. You should also replace those color values with the corresponding CSS custom properties you create.
2. You do not need to repeat any code that's unchanged, based on the following code. Only include new code. You can use a comment as a placeholder to reference the location of other unchanged code.
Here is the CSS:
(Replace this line with the CSS)"
Prompt 2:
"Provide me with 20 color schemes utilizing the previous CSS custom properties you created. They should be in the form of comma separated javascript objects, where you set each custom property name to a new color value, for example:
{"--property1": "#1f1f1f", "--property2": "#000"},
{"--property1": "#1f1f1f", "--property2": "#000"}, and so on..
Ensure that all color schemes you utilize adhere to good color design principles, and make sure any text adheres to the WCAG 2.0 color contrast guidelines. One of the color schemes should be a dark mode where the body background is dark with light text. One should also be 100% black and white with no grays. Additionally, some color schemes can be monochromatic, others analogous, etc. Ensure that no two color schemes are very similar."
0:00 - Intro
0:15 - How it works
3:44 - The Color Schemes (Results)
6:48 - Final thoughts
#ai #colors #uidesign
- - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!
