Fun Colorful Codepens
Nathan Renfroe
Posted on October 4, 2024
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.
Posted on October 4, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.