DailyUI #060 - Color Picker
Zoom-in (click image) for better image quality.
Good evening Dribbblers 👋
This is my #060 #DailyUI design. 🎨🖌️🍭
Design Hint 💻
No design hint today... 😔 Where are these disappearing off to? 😅
The Idea 💡
The idea for todays UI design is a color picker element as part of a theoretical digital art software program for desktop. The element will feature a hue slider bar, alpha slider bar, gradient options, palette box, custom swatches, eyedropper tool and color code options. The design will have a round and fun aesthetic, making use of 'squircles', I won't strive too far away from the usual layout of current colour pickers, to keep with what users are already used to.
Final Thoughts 🧠
It's aesthetically pleasing, and fun to use. It looks 'cute' with the use of the 'squircle' shapes, which gives it it's fun quality.
The design doesn't strive too far from the usual colour picker in todays software packages, this was intended and is what I wanted from the very start. I didn't want the user to end up using something that should be ingrained in the back of the mind but isn't, due to a 'wacky' new layout.
The layout was designed so that navigating from top to bottom, the user could get the desired colour in seconds. First, select a color from the hue slider at the top of the element, and select if the colour should be solid or a gradient with the dropdown to the right. Second, use the large palette box in the centre of element to select the desired shade of hue. Third, use the alpha slider underneath the palette box to select the desired transparency. There you have it, the desired colour, from top to bottom; in seconds. Optionally the user can also hot swap the colour codes via the HEX/RGB dropdown underneath the alpha slider OR use the 'eyedropper' tool to select a colour from an external source OR add the current selected colour to a custom 'swatch' for later uses.
Overall, it's been a fun afternoon of designing my colourful and cute colour picker. It's relaxing to look at and fun to use, I love it!
Share the love, press "L" or "F" if you ❤️ my work!
If you want to stay up to date with my work, head over to my profile and follow me. 🎨
As always, I welcome any feedback! 😄
- Elliot