Use AI & JavaScript to Generate Amazing Color Schemes

-- 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:

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!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

Here's an idea: Create a VSCode extension that automates much of this process. Hit me up on Twitter and I'll feature it!

[CarlHemmer]

This is awesome! I used a similar prompt in a project recently to generate a dark theme with little effort. But this takes it to a whole new level.

[badlegend]

That's some really good results. Thanks for breaking it down, how to use it.

[Like_a_lion_]

Thanks Gary! Really appreciate your work. Gonna test this script, ope output would be as great as in the video

[stndgzz]

really awesome stuff to tinker with. thank you very much for this high quality content!!

[shinomitsu]

Awesome stuff! And thank you for the music discovery.

[patrickclough]

Appreciate all the content, love this concept!

[IgorTavarez-vwzh]

Thanks for the video, I'll use the prompt for my next project.

[atifamaysa]

I lost words!! This is freaking awesome!!

[tarikcno]

Very nice, how can we do it in React and NextJs

[denver]

is there anything similar for creating the best fonts combination?

[oswallt]

I really like the AI videos you've been making.

[Jet]

are there css and html files as well or is it something we need to make ourselves?

[EranAriel]

YouTube pump this channel 🎉 thanks really great one

[snowandcoal]

There's download files only for SVG Curvy Text Animation, Threeasy 3D Object Animation on Scroll and Immersive AI Worlds Tutorial.

[sonalbaheti]

Can you give me code for this: css and html. it would be very helpful

[ob]

I'm sorry, maybe it's a stupid question, maybe because of my English.. The question is, can I immediately write in css
--root and then css with vars, or is it important to write normal css first, then --root and css with vars?

[snowandcoal]

Could it be that youtube doesn't like videos that praise Open AI since it's competitor to google

[dacb-uexq]

great video but i have some special question related to design of shirt you are wearing. do you really do exact sequence of activities your shirt presents? eat and code with no sleep? if you do how you can stand it (cause in this case it is amazing) thanks

[jurjenyoutub]

Heey Gary, would this be possible with scss instead of css variables?