Activity

Lyric S

I started my project! :D I’m building a desktop-based personal website for Flavortown’s WebOS sidequest. I started the core layout/look for a desktop-style layout that I can continue to build off of throughout this project. I added a top bar, a window that I’ll use as a template for the rest of this, and spent over an hour trying to figure out how to have the clock update and have the top bar display my most recently played song on Apple Music using last.fm. My next steps are going to be working on the windows, adding more features, and making it look nicer.

Attachment
0
Lyric S

Started the website and worked on creating a structure/base I can start from. My main goal was just to set up the site base and set up testing for the future. I spent most of my time trying to figure out how to add images and links in HTML, which took a bit of refreshing lol. My next steps are going to be to continue working on the structure and layout of the website.

Attachment
0
Lyric S

Shipped this project!

Hours: 11.03
Cookies: 🍪 148
Multiplier: 13.42 cookies/hr

I built a web-based color palette generator that creates a full 3×5 palette from a single base color, with small hue and lightness shifts for more variation. Users can adjust how “different” the rows are, click any color to copy it to their clipboard in multiple formats, and share palettes using a URL that recreates the same colors. Users are also able to export their palette as a JSON, CSS, or PNG file. While making it, I learned a lot about color math (especially HSL), JavaScript event handling, and a lot more about website development. I had a lot of fun making this :)

Lyric S

Today I worked on improving my Color Palette Generator with a bunch of new features and design updates:

Copy format dropdown: Users can now choose whether to copy HEX, RGB, or HSL to their clipboard when clicking a color.

Click to copy with toast notification: When a color is clicked, a small pop-up appears telling users the color was copied and in which format.

Row Difference slider: Added a slider that changes how different the top and bottom rows are from the middle row. The slider updates the palette in real-time.

Better color card layout: HEX, RGB, and HSL values are now on separate lines in the bottom-left corner of each card, and the text color adjusts automatically so it’s always readable.

Fixed card sizing: The color boxes now stay the same size even when toggling features or resizing the page.

URL sharing: Users can now copy a special URL that will recreate the same palette for anyone who opens it.

Credits: Added a small credits section that always stays at the bottom of the page.

Button and control styling: Cleaned up buttons, sliders, and dropdowns so they match the overall design of the palette generator.

Everything now looks and feels more polished and has more features. I’m really happy with how it turned out!

Attachment
0
Lyric S

This is my first devlog, and how I started this project :D

I started by making a simple webpage with a color picker so I could choose any base color for the palette to be based on. I focused on converting that color from HEX to RGB and then to HSL so I could manipulate it mathematically in JavaScript. I tried making a small palette at first by creating a palette of 5 colors by just changing the brightness, but it didn’t look very natural for art since everything was just darker or lighter. I didn’t like the limited palette, so I expanded it to 15 colors in total: 5 warmer shades, 5 base shades, and 5 cooler shades. I arranged the colors in 3 rows × 5 columns to look better.

After that, I worked on the color cards themselves. I made each card display the HSL, HEX, and RGB values, so it’s easy to reference while painting or designing. The palette works how I want it: you pick a color and can see 15 variations that you can use in any project. My next steps will be to add more features and to make the website more presentable and look better :D.

Attachment
0