We are authentic sports
• Content by sight media lab. • Photo credits: sight media lab. + ball madness.
Working with ball madness and it's brands emphasis on authentic sports marketing, has been one of the most fun parts of creative design. But if you don't use them right in your CSS code, colors can also tank a site's usability and accessibility. In this project highlights, we'll explore simple, real-world tips for effectively using color in your brand marks and its effects on the newly reworked client work.
How to create a wonderful brand mark
Choosing the right colors for the mark can be tricky. Get one wrong and your entire design can feel off. Luckily, there are some simple strategies to create a foolproof web color palette:
Limit your palette - Stick to just 2-4 core colors for most marks. Too many colors look disjointed.
Focus on one dominant hue - Pick one main color and derive the rest of the palette from it. This creates cohesion.
Use color wheel relationships - Choose adjacent or complementary colors on the wheel for built-in harmony.
Consider tone and contrast - Include light, medium and dark tones for visual interest. Test contrast for accessibility.
Considering the different formatting options, you can optimize color usage for any need. Use hex for one-off values, RGBA where you need opacity control, HSL for color adjustments, variables for theming, and preprocessor operations for transformations. With the right format, implementing colors in CSS becomes much more flexible and manageable.
Following these simple tips will ensure you have a tightly edited, flexible, and foolproof palette ready for your next logo mark and branding project.
Focus on one dominant hue - Pick one main color and derive the rest of the palette from it. This creates cohesion.
sight media lab. is all that! - ibn anderson
The best color formats for different needs
When adding color in your design projects, you have a few formatting options to choose from. Each has their own strengths depending on the use case. For specifying plain color values, hex codes are the usual default.
They allow for millions of specific color values in a compact 6-character string. But RGB and HSL values also have advantages. RGB provides an easy way to adjust opacity with the alpha channel. And HSL makes it simple to tweak hue, saturation and lightness independently.