Fun Colorful Codepens

Hi, as a designer color is really important to me.

Over the last two years I have collected and create a few color palettes. But that is not the topic of today's post.

Today I wanted to share a few fun color pens that I made.

Let’s go…

(Note: Some of these might not be compatible on mobile.)

---

1. RGB Color Sliders

What can I say about this. First off before we go any farther I should say that I use Microsoft Copilot to help me with the finer details of CSS and JS.

Ok what are some cool features of this. Playing with the sliders updates the page background color and the text input values for RGB instantly. This works bidirectionally if you want to type a value in rather than play with the slider.

2. Color Calculator

Who doesn’t love a basic calculator? This one has a cool feature that allows you to type or paste a color hex code into the answer display to change the color!

3. Random Color Palettes with JS

Speaking of color palettes. Here is a random color palette generator. I created this just for fun. I know I use AI a lot to help me create projects. But when it comes to color palettes, AI or a random color palette generator is not something I use. It might have its use cases, but a lot of my design projects are very dear to me and I try to be intentional about the colors I use.

4. Black and White clock face

Very beautiful simple cock face. Would make a great screen saver. Click to toggle light and dark theme.

5. SunBible app frame with Color theme options

This is a project that I have worked on for many years. I built this from the ground up, and package it as a desktop app with electron. You can view the entire code for it on GitHub

6. ABC’s Infinite Snap Scroll with Color animation

Well thank you for scrolling to the end of this article. If you like scrolling I got you covered.

I would love to connect with you in the comments. Let me know what you like, maybe give me an idea for another fun project.

The above is the detailed content of Fun Colorful Codepens. For more information, please follow other related articles on the PHP Chinese website!