Installing and creating custom color schemes in Procreate is easy. You can import swatches from various sources (like the ones below) or create palettes directly within the app. Procreate’s intuitive color wheel and palettes allow for quick adjustments and seamless integration into your workflow, making it easy to experiment and find the perfect color scheme for your projects.

This collection has some of the best free color schemes and swatches available for Procreate. These curated palettes are designed to simplify your color selection process and give you the tools you need to create professional-grade digital artwork.

Whether aiming for vibrant contrasts or subtle harmonies, these free color resources offer valuable inspiration that will help improve your digital creations in Procreate.

If you’re new to Procreate, you might like to take a look at this collection of tutorials. And if you’re looking for brushes, you will love our collection of free Procreate brush sets.

Procreate Color Swatches for Painting & Drawing

37 Color Palettes, Free to Download

This download includes over 35 color schemes. The free palettes offer vibrant hues for cartoon characters, dramatic contrasts for action-packed comic scenes, and delicate tones for expressive manga illustrations.

2024 Colors of the Year Procreate Palettes

This small Procreate download includes two swatches inspired by Peach Fuzz, the 2024 color of the year. Perfect for creating warm, inviting designs with a contemporary twist. These color schemes will bring freshness and energy to your art.

Lipstick & Ice Cream Procreate Color Palettes

4 Color Palettes, Free to Download

This collection includes four unique color schemes: Vintage Pastel, Lipstick Colors, Enchanted Woods, and Ice Cream Colors. They are perfect for creating nostalgic designs, fashion illustrations, and playful artwork. In addition to the swatches, you will also get free PNG images.

Synthwave Procreate Color Palette & Swatches

3 Color Palettes

This small collection of three color schemes has been inspired by retro 80s Synthwave designs. They are perfect for creating vibrant, neon artwork and retro-futuristic digital illustrations, as well as projects that need a nostalgic feel.

Landscape Color Palettes for Procreate

10 Color Palettes, Free to Download

This collection includes ten color schemes designed for landscape digital art. These free palettes are perfect for creating natural environments, from lush forests to serene deserts, offering a variety of hues for different scenic creations.

Sunflower Fields Procreate Color Palette

Free to Download

This free Procreate color scheme has been inspired by sunflower fields in the summer. Use these vibrant yellows and greens to create bright, cheerful digital art.

Color Palette Collection for Procreate

234 Color Palettes

This extensive Prcreate collection includes over 200 palettes and over 7,000 colors, covering a wide range of digital art styles. Ideal for any creative project, these swatches provide numerous options for all your artistic needs.

Skin Tones Procreate Color Palette

Free to Download

This Procreate color scheme includes 30 skin tones. This swatch covers a broad range of shades, perfect for portrait and character design, allowing you to paint realistic and varied human figures.

Bright Candy Procreate Color Palette

This Procreate color scheme has been inspired by the bright colors of candy. Use the vibrant hues to create playful designs. It is perfect for illustrations that need a fun and energetic touch.

Various Procreate Color Palettes

6 Color Palettes, Free to Download

This collection includes six Procreate color schemes: Mutemath, Sweetheart, Cold Winter Air, Botanical Romance, Blinded by the Light, and In the Bubble. These schemes are great for creating diverse themes, from soft and romantic to bright and vibrant digital art.

Christmas Mood Procreate Color Palettes & Swatches

This collection includes seven Procreate color schemes: Cozy Christmas, Evergreen, Traditional Christmas, Christmas Mood, New Year Evening, Warm Wishes, and Golden Christmas. These schemes are perfect for creating festive holiday designs and art.

Procreate Color Palette Collection

200+ Color Palettes, Free to Download

This collection includes over 200 Procreate color palettes covering landscapes, still life, portraits, skin tones, metallics, manga, Pantone, pop art, art deco, impressionism, and more. They’re great for various digital art styles.

Valentine’s Day Procreate Color Palettes

This Procreate color palette is perfect for Valentine’s Day artwork and designs. With these carefully selected colors, you can create romantic art that is excellent for cards and illustrations.

Light Pastel Procreate Color Palette & Swatch

This Procreate color scheme of light pastels offers soft, gentle hues. It is ideal for creating delicate, soothing designs, and is perfect for backgrounds, portraits, and minimalist artwork.

Seasonal Color Schemes for Procreate

4 Color Palettes, Free to Download

This collection includes four seasonal color palettes for Procreate: Snowy Landscape, New Year’s Fireworks, Christmas Art, and Autumn Palette. Each palette offers unique schemes for creating seasonal and festive artwork.

Gorgeous Procreate Color Palettes

4 Color Palettes, Free to Download

This collection includes four free color palettes for Procreate: Bouquet, Sunset, Coral, and Landscape. They offer a range of colors for floral designs, dramatic skies, ocean themes, and natural scenes.

Autumn Inspired Procreate Color Palette

Free to Download

This free Procreate color scheme, Autumn Allure, is perfect for warm, fall-inspired digital art. Use the rich, seasonal colors to create autumn-themed designs.

Neon Lights Color Palette for Procreate

Free to Download

This free Procreate color palette, inspired by bright neon lights, is perfect for creating vibrant digital art. A Photoshop version is also available.

How to Install & Create Color Schemes in Procreate

Installing Color Schemes:

1. Download the Swatches: First, find and download the swatch file (.swatches) you want to use from above.
2. Import Swatches into Procreate: Open Procreate and navigate to the color panel by tapping the color circle at the top-right of the screen. In the color panel, go to the Palettes tab. Tap the + icon to add a new palette, then select New from File. Locate the downloaded swatch file on your device and tap on it to import the swatches into Procreate.
3. Good to go: Your color palette is ready to use!

Creating Custom Color Schemes:

1. Open the Color Panel: In Procreate, open the color panel by clicking on the color circle at the top-right corner.
2. Select the Palettes Tab: Within the color panel, switch to the Palettes tab to manage your color schemes.
3. Create a New Palette: Tap the + icon and choose Create New Palette from the options. This will generate an empty palette ready for customization.
4. Add Colors to the Palette: Use the color wheel or sliders to select a color that fits your scheme. Tap on an empty square within your new palette to save the color. Repeat this process to add additional colors, building your custom palette.
5. Organize and Name the Palette: To make the palette easier to identify, tap on its title to rename it. You can also drag and drop colors within the palette to organize them according to your preferences.

Conclusion

These curated color schemes and swatches for Procreate offer numerous benefits by simplifying your design process and improving the visual quality of your digital artwork.

These palettes will inspire new ideas, spark creativity, and help bring fresh perspectives to your projects. By experimenting with these color schemes, you may discover new styles that inspire you to create even more unique art.

The post 15+ Free Procreate Color Schemes & Swatches for Digital Artists appeared first on Speckyboy Design Magazine.

Color is perhaps the foundational element. Because, regardless of the other steps you take, an inaccessible color palette severely undermines usability. Even users who aren’t visually impaired will have a difficult time reading and understanding text.

As designers, we tend to craft features in a way that we think looks good without always considering the consequences. Clients may also insist on using brand colors – even if they’re not accessible. This has led to a lot of avoidable issues.

The good news is that compliance with WCAG color contrast standards isn’t very difficult. As we’ll demonstrate, testing color contrast ratios takes mere seconds. From there, it’s a matter of making any necessary adjustments.

Indeed, the most important step is taking the time to test. Let’s get started!

When to Test Color Contrast Ratios

In a perfect world, color contrast ratios should be tested right from the very start of a project. That means implementing a compliant color palette in website mockups and style guides. That way, you can be confident that your design will pass muster.

Granted, you may have missed the boat when it comes to existing projects. But testing a site’s color scheme can be done at any time. And thanks to the power of CSS, the process of repairing any non-compliant combinations can be fairly simple. A search-and-replace may do the trick.

Accessibility is an ongoing process, however. This is especially the case on sites where new content is regularly added. If clients have access to a WYSIWYG editor and the ability to change colors, routine testing may be required.

It also points to the importance of educating clients on accessibility and best practices. Using poorly contrasting colors will cost time and money to repair. When clients understand the issue, they’ll be more likely to avoid making any ill-advised decisions in this area.

Website Color Contrast Ratio Tools

Now that we have the “when to test” out of the way, let’s focus on the “how” portion of things. The first step is finding a suitable tool for running tests.

There are several tools available on the web. However, we’ll quickly focus on a pair. One (WebAIM Contrast Checker) is a manual tool, while the other (WAVE Tool) is automated.

WebAim Contrast Checker

This tool is about as simple as it gets for testing your site’s contrast ratio. Enter the HEX codes for your background and foreground colors, and the WebAIM Contrast Checker will calculate the exact ratio.

Based on your score, the tool will report whether or not you comply with WCAG AA or AAA standards. If not, you can use the color sliders to tweak hues until you get a passing grade.

WAVE Web Accessibility Evaluation Tool

Enter your site’s URL and WAVE will automatically scan your site and evaluate several accessibility factors – including color contrast. A browser extension is also available for Chrome, Firefox, and Microsoft Edge.

WAVE provides a lot of data – and there are times when it reports false positives. With regards to contrast, this tends to happen when HTML text is layered on top of an image background. Since the tool relies on CSS color values, having light-colored text with no background color defined will result in an error. Thus, you’ll want to do some further investigation to verify its findings.

Either of these tools will get the job done. However, it’s worth noting the limitations of automated tools. Sometimes, manual testing will need to be a part of the process.

Understanding the Standards and Resolving Issues

For most websites, the goal is to comply with WCAG’s AA standards for “normal” text (below 14 points/18.66 pixels in size). AAA standards are more stringent, and even the W3’s documentation points out that it may not be possible for some types of content to meet the requirements.

If your website’s content areas meet these standards – bravo! If not, any issues should be simple enough to resolve.

For HTML and CSS, tweak your color combinations until they meet or exceed the ratio (4.5:1). If you’re using an image background, you can use a tool such as Photoshop or even a CSS filter to get things in order.

The most difficult part may be convincing clients to use different hues. The hope is that once they understand what’s at stake, they’ll be more open to change.

In addition, it’s also worth visually studying the elements you need to repair. There may be scenarios when you meet the requirements and content still isn’t as readable as it could be. Going for a higher contrast ratio could improve the user experience significantly.

Color Your Website for Accessibility

Colors say a lot about a website. They help with brand recognition and set a mood. But their biggest impact may be in accessibility.

And, unless you’re using plain old black-and-white, compliance with WCAG standards isn’t a given. That’s where testing comes in.

Hopefully, this guide will get you thinking about color throughout your web projects. Starting with an accessible palette is best, but even an old website can be brought up to snuff. It’s well worth the effort!

The post Accessibility Tip: How to Test Color Contrast Ratios appeared first on Speckyboy Design Magazine.

In video editing, LUTs make the color grading process easier, allowing you to quickly create professional and creative results. They save time, maintain uniformity, and give you more creative control.

This collection shares the best DaVinci Resolve LUT packs. From cinematic and wedding LUTs to those designed for travel and social media, these color grading resources will help you find the perfect look for your footage.

Street LUTs for DaVinci Resolve

12 DaVinci Resolve LUTS

This LUT pack has been designed to give your videos an authentic street or city color effect. Whether you’re working on a documentary, music video, or any project with a city backdrop, this pack is perfect for capturing the mood of urban environments.

Old School DaVinci Resolve LUTs

12 DaVinci Resolve LUTS

If you’re working on a project that needs an old-school aesthetic, these DaVinci Resolve LUTs are a simple way to achieve it. This pack includes 12 LUTs, all designed to bring a retro or vintage feel to your video projects.

Thermograph LUTs for DaVinci Resolve

20 DaVinci Resolve LUTS

This DaVinci Resolve LUT pack has 20 unique thermograph color effects. They add a distinctive heat-vision style to your footage, perfect for artistic videos, music clips, and experimental films.

Cinematic Tone LUTs for DaVinci Resolve

15 DaVinci Resolve LUTS

This DaVinci Resolve LUT pack gives you fifteen epic movie-style color effects. These LUTs provide deep, impactful color grades, making them a valuable addition to your toolkit.

Aesthetic Dark DaVinci Resolve LUTs

12 DaVinci Resolve LUTS

This pack includes 12 dark and moody color effect LUTs. They’re ideal if you’re looking for a deep and emotional aesthetic. Perfect for suspenseful thrillers, dramatic short films, or any content needing a darker feel.

Moody Travel DaVinci Resolve LUTs

30 DaVinci Resolve LUTS

This pack includes 30 LUTs designed for any travel and adventure video that needs a dark color grading style. It is ideal for travel filmmakers and videographers who want a more emotional tone in their videos.

Social Media LUTs for DaVinci Resolve

74 DaVinci Resolve LUTS

This DaVinci Resolve LUT pack includes a variety of color grades that will help create striking tones and effects that will make your social media content stand out. They’re also perfect for Instagram-style color grading.

Fashion Color LUTs Pack for DaVinci Resolve

16 DaVinci Resolve LUTS

This set of 16 color grading presets has been designed for fashion and modeling. Perfect for fashion photographers and videographers, these presets will give your projects a sophisticated and modern look.

Stunning Landscape DaVinci Resolve LUTs

10 DaVinci Resolve LUTS

These color grading presets are ideal for video creators who want to highlight the natural beauty of landscapes and the outdoors. They offer precise color corrections to make your landscape footage vibrant and lifelike.

Romantic Wedding LUT Pack for DaVinci Resolve

15 DaVinci Resolve LUTS

This DaVinci Resolve LUT pack includes 15 color grading presets designed for wedding videographers. These presets will add elegance to your footage and capture the emotional and romantic atmosphere of the wedding.

Color Grading in DaVinci Resolve

As you dive deeper into DaVinci Resolve, remember to explore and experiment with different LUTs to find the packs that work best for you and your project.

These LUT packs offer a unique spectrum of colors, tones, and moods, giving you endless creative possibilities. As color grading trends change, staying updated with the latest LUTs will ensure your work is always fresh and engaging.

The post 10+ Best Color Grading LUTs for DaVinci Resolve in 2025 appeared first on Speckyboy Design Magazine.

The first recorded color wheel was developed in 1666 by Sir Isaac Newton. Though these circular color diagrams have changed slightly over the years and some debate their exact layout, their key elements have remained consistent.

The primary colors – blue, yellow, and red – are arranged around the wheel. Secondary colors, which are green, orange, and purple, fit between the primary sections. Purple sits between red and blue, since those are the two colors required to make purple. Green and orange follow suit in their placement. Tertiary colors are added in the same way – by combining adjacent colors and then displaying the result between them.

Colors on opposite sides of the wheel from one another are complementary. The maximum contrast these combinations create can bring out the best in each color when properly applied. Examples are green plants with purple flowers, or blue shirts with yellow trim.

Color theory is a field that some have devoted their lives to studying, and there is a great deal of science behind color matching and combining. However, from web designers to hospitals, kindergarten teachers to news outlets, different colors have varying emotional and psychological effects on viewers. How do you best leverage this in website design?

Bright Red, Black, and White

In nature, red is frequently a sign of danger – think of strawberry poison dart frogs or an Anthurium plant. Humans have evolved to see red as a stimulating color that immediately captures attention. News sites frequently employ this color to convey a sense of urgency. Red can even increase blood pressure in patients. As a result, one must apply it wisely – too much red can incite a sense of anger or overstimulation.

Try combining reds with black and white. These blanket colors continue to promote the empowering feeling of red fonts and menu bars while providing a clean backdrop to balance it. Use this combination in designs that convey power and importance:

Medium Orange, Muted Teal, and Beige

Orange conveys a friendly, energizing, and cheerful sense. It is the most sacred of all colors in Hinduism, in which it represents purity. As it pertains to design, this color is highly versatile. Deeper orange can evoke a sense of flame, while at the other side of the spectrum a light orange is cartoonish.

As the primary color in a design, orange is energizing and fun. Though it works equally well as an unobtrusive background color, many embrace the bold and bright look of placing orange forward in websites. This is especially appropriate for younger audiences and websites that do not take themselves too seriously. Try a medium orange with muted teal and beige:

Vibrant Yellow, Black, and Grey

Yellow is a joyous color that inspires enthusiasm in its brighter shades. However, it can connote a sense of antiquity and respect. In ancient cultures, yellow was a color of gods and kings because of their spiritual relationship with the sun. In more-recent history, pale yellows featured prominently in Victorian design, specifically in affluent areas.

For a sophisticated, bright look, vibrant yellows paired with grey and black are excellent choices. Black and grey are traditionally professional colors that have a businesslike feel. Adding yellow creates warmth without detracting from the sophistication:

Bold Green, Beige, and White

Green is a perfect combination of cool blue and warm yellow. It maintains the calming and energizing effects of both colors, creating a sense of balance. Heavily rooted in the earth, green tones are comfortable and convey a sense of safety. Freshness, vitality, and wealth are all associated with the color green. It also represents the heart chakra, and is a symbol of balance and nature.

Using green as the central color in a design, allow the earth tones to carry through without being overbearing. Try using light beige and ivory tones to complement a bold green. The safety and balance of the color translates to the audience in this combination, without painting a clearly tree-inspired look:

Royal Blue, Pale Yellow, Grey

To promote a sense of strength and stability without somberness, try a deep royal blue with pops of a pale yellow and grey. Dark blue is associated with the ocean, giving it a sense of vastness. Royal blues also evoke a feeling of trust, intelligence, and authority. However, blue has also evolved to represent sadness.

Pairing a royal blue with light yellow creates a perfect balance. These two colors sit opposite one another on the color wheel, making them complementary and causing them to highlight one another. Pale yellow brightens the overall look, maintaining the dignity of the royal blue, while keeping it from tipping into a sad color choice:

Lavender, Bright Pink, and Ivory

The color lavender calms the mind and nerves while having an uplifting effect on the viewer. People frequently use lavender plants to help them relax and sleep better. This pale purple shade is a lovely backdrop for elegant designs. However, sticking strictly to lavender can have an overly sleepy impact on the viewer.

Combine lavender with bright pops of pink to keep the eye entertained. Using these tones over a neutral such as ivory allows them to shine without being overwhelming:

Magenta and Dark Grey

Wisdom, intellect, and knowledge are all associated with the color grey. This classic color is sleek and dignified, representing a quiet authority. Resting between the extremes of black and white, it is highly balanced. Magenta is fun, exciting, and stimulating. Similar to red, it has been linked to increased heart rate and blood pressure.

Magenta is a passionate and bold color, with a real sense of joy about it. Combining these two very different colors creates a beautiful look. The pairing of bright and bold with refined and calm creates interest while conveying authority:

Creating Your Palette

The above suggestions are just a few examples of great color palettes to use when creating your website. It is somewhat common for designers to repeatedly fall into the same habits with their color choices. Remember that personal preference must take a back seat to the company’s brand identity.

Begin by writing down some words that describe your brand – sophisticated, fun, intelligent, or whimsical could be examples. Next, consider what colors will convey that sense to your target audience. Factor in the emotions you hope the site will convey as well as what you hope the site will inspire users to do. As an example, a bakery should not use black and white designs – this will not inspire people to eat.

Once you have a target feeling and primary colors for the design, do not be afraid to experiment. Sometimes colors that you assume will clash actually complement one another. Similarly, tones that are too alike may create monotony. Enjoy the design process and further your brand identity.

You might also like to learn about what your eCommerce store colors says about you.

The post Choosing the Best Color Palette for Your Website appeared first on Speckyboy Design Magazine.

We often use established design patterns. Navigation is placed at the top or along the side of a page. Headings and white space create content separation. You get the idea.

This process works well. But CSS allows us to go the extra mile for users. We can now cater to their preferences as well.

By detecting a user’s system preferences, we can serve styles to match. It’s all possible through CSS media features.

Here’s a look at the various user preferences we can detect. We’ll also explore how they can help us improve usability and accessibility.

What’s Being Detected? Where Does It Come From?

The term “user preference” can have multiple meanings. In web design, it has traditionally referred to saving preferences locally. A user selects from various options on your website. From there, preferences are stored and retrieved via a cookie.

But CSS enables a different approach. A media query can detect user preferences at the device level. That allows us to retrieve a user’s configuration. We can then adjust the website’s styles accordingly.

This isn’t a way to spy on users. The data doesn’t look at personally identifiable information. The user isn’t required to have an account on your website. And the data won’t allow you to track someone.

Users can set preferences in their browser or operating system. Color schemes (dark or light), color contrast, and reduced motion are primary examples. It’s up to individual websites to detect and/or respect those settings.

This method increases privacy and efficiency. Users don’t have to divulge personal information. And web designers won’t have to build custom settings.

Examples of Detecting User Preferences with CSS

Now it’s time to explore a few examples. We’ll use three media features included with CSS.

Color Scheme

The prefers-color-scheme media feature detects a user’s device color setting. The choices are “light” or “dark” modes. Both mobile and desktop operating systems offer this feature.

If a user prefers a dark color scheme, you can use CSS to implement relevant styles. Below is an example of prefers-color-scheme in action.

See the Pen Using CSS prefers-color-scheme by Eric Karkovack

So, what if a user doesn’t want a dark website? You can use a toggle to let them switch between modes. Providing this flexibility makes your website even more user-friendly.

Color Contrast

A high-contrasting color scheme is easier to read. Operating systems tend to include the option in their accessibility settings.

It’s possible to detect this preference via CSS prefers-contrast. This setting allows for a bit more ambiguity than prefers-color-scheme. Options for “more” and “less” are the most common.

However, the “custom” option requires a specific set of colors. In that case, we can use forced-colors to adapt the page.

The following example uses a gray background by default. If the prefers-contrast preference is set to “more,” we’ll change it to white.

See the Pen Using CSS prefers-contrast by Eric Karkovack

Reduced Motion

Web animation can be a great thing. It adds interactivity and context to an element. But certain types of animation can be harmful.

Users with vestibular motion disorders can become ill – or worse. That’s why it’s best to avoid intense flashing animations.

Some devices have a setting that requests that websites use minimal motion. The prefers-reduced-motion media feature will detect the setting.

The following example includes a rotating square. Note that we’ve been careful to use a slower form of movement. But if the prefers-reduced-motion setting is “reduce,” we’ll stop the animation.

See the Pen Using CSS prefers-reduced-motion by Eric Karkovack

Want to try the setting? MDN has a handy guide for locating it on your device.

Instantly Improve the User Experience

CSS provides some great ways to detect user preferences. They’re easy to use. And they take the guesswork out of building clean, accessible UIs.

Granted, we don’t have to follow a user’s device preferences. And our clients may be wary of different color schemes.

But even slight tweaks to reduce motion and increase contrast are helpful. They amount to little things we can do to improve the user experience (UX). That will benefit everyone.

The post How to Detect User Preferences with CSS appeared first on Speckyboy Design Magazine.

In practice, this tends to result in the offering of both dark and light modes. But it’s not just for cosmetic purposes. Contrast plays a huge role in accessibility. For instance, some users with visual impairment will find a dark color scheme easier to read.

Designers are also taking a user’s system preferences into account. Some websites will now detect whether a user’s operating system is set to use a dark or light color scheme – then serve up the appropriate styles.

Still, it’s never a good idea to force users into a particular contrast mode. That’s why it’s important to provide a way to toggle between them. And that functionality is our focus for today.

Here are eight unique CSS and JavaScript code snippets for switching between dark and light modes.

Light, Dark or Black Theme

This settings panel provides three distinct color modes and is beautifully designed. The transition between modes is smooth, allowing for less-jarring changes. The menu uses HTML radio buttons that have been styled into a toggle switch. It’s simple, attractive, and functional.

See the Pen Light / Dark / Black Theme by Håvard Brynjulfsen

Easy Dark Mode with SASS

A simple checkbox powers this contrast mode toggle. From there, JavaScript is used to add a data-theme attribute to the page’s HTML tag. SASS then looks for the attribute’s value and styles the content accordingly.

See the Pen Easy Dark Mode with SASS by Kaio Almeida

Light or Dark Mode

Why not have some fun with the concept of switching contrast modes? This snippet features SVG images and animation to create a unique day-to-night toggle. Note that while it visually conveys the message, it may benefit from some accessibility enhancements before being put into a production environment.

See the Pen Light / Dark Mode by Álex

CSS Theme Switcher

Several snippets in this collection use JavaScript – but CSS is capable of handling the task alone. This example not only looks good but also implements an accessible HTML form to power the mode switch. When you create functionality that everyone can use, it’s a win-win situation.

See the Pen CSS Theme Switcher by Michelle Barker

GitHub Dark Mode Toggle

While this oversized toggle maintains its white background throughout, it does change icons along with the page’s contrast mode. Also, note that the various background shapes turn into bright neon colors while in dark mode. This adds both fun and context to the presentation.

See the Pen GitHub Dark Mode Toggle by Chintu Yadav Sara

Persistent Dark Mode

If you’re looking for simplicity, this color mode button will do the job. No fancy icons (although you can certainly add them in) or wild animation. Just a single click and some smooth CSS transitions. In addition, there’s a handy bit of JavaScript that will save the user’s preference in local storage.

See the Pen Persistent Dark Mode by Brian Haferkamp

Basic Vue Reactivity

As we’re seeing more JavaScript-driven UIs these days, it’s only fitting that we have such an example. Here, a Vue component lets users switch contrast modes via a simple checkbox. This one has plenty of potential for dressing up via CSS.

See the Pen Basic Vue Reactivity by CodePen

Dark Mode

For projects that could use a bit more creativity, this swinging-lightbulb toggle should provide plenty of inspiration. To keep things accessible, the bulb image is placed inside an HTML button element. Animation is provided through CSS. It’s a great way to spice up a portfolio or blog.

See the Pen Dark Mode by Airen

Come to the Dark Mode (Or Light – It’s Your Choice)

Adding color contrast modes to your website makes sense in several scenarios. It allows designers to offer users their choice of aesthetic while also making content more accessible.

As the snippets above demonstrate, there is no shortage of ways to implement this feature. CSS allows for near-limitless styling options, while JavaScript can provide key functionality where needed.

The post 8 CSS & JavaScript Dark & Light Mode Code Snippets appeared first on Speckyboy Design Magazine.

But with so many possibilities, it’s hard to know what kind of abstract wallpaper will suit your tastes. It’s not like most people think to themselves, “I want to see a horse made of vegetables flying through a meat rainbow,” when choosing a desktop wallpaper.

That’s why we’ve curated a collection of stunning examples of abstract 4K wallpapers for you to choose from. From bold and bright designs to more subdued and intricate patterns, there’s something here for everyone.

So please take a look through our collection and find the abstract wallpaper that speaks to you. Who knows? You may even find yourself gaining a deeper appreciation for the beauty and complexity of abstract art.

You might also like our collection of Free Abstract Photoshop Brush Packs.

Blue & Pink Droplets

Created by Bilal

Abstract Color Tree Background

Created by Envato Elements

Molten Waves 4k Wallpaper

Created by Abdelrahman

Liquid Colorful Abstract Backgrounds

Created by Envato Elements

Red, Blue & Yellow Lights Wallpaper

Created by Rebecca Diack

Blue & Orange Smoke Wallpaper

Created by Lucas Benjamin

High-Resolution Abstract Colorspace

Created by RammPatricia

Abstract Colorful Dust Backgrounds

Created by Envato Elements

Paintwaves

Created by Ari Weinkle

Red, White & Blue Abstract Painting

Created by Dids

Colorful Abstract Polygon Backgrounds

Created by Envato Elements

Multi-Colored Confetti

Created by Jason Leung

Multi-Colored Rainbow Artwork

Created by Daniele Levis Pelusi

The Turn 4K Wallpaper

Created by Puscifer91

Colorful 3D Abstract Backgrounds

Created by Envato Elements

Blue & Yellow Abstract Art Image

Created by Rodion Kutsaev

Pink & Blue Textured Wallpaper

Created by Pawel Czerwinski

Abstract Watercolor Textures

Created by Envato Elements

Light Abstract Background

Created by Envato Elements

Waves 4K Wallpapers

Created by Javier Ocasio

Colorful Dimensional Warp

Created by Ahmed Nabil

Glowing Wavy Lines Background

Created by Envato Elements

NANU 4k Wallpaper

Created by Mart Biemans

Blue, Red & Black Abstract Smoke Wallpaper

Created by Ruvim Noga

Colorful Gradient Wallpaper

Created by Gradienta

Red & Blue Abstract Painting 4K Wallpaper

Created by Rahul Pandit

Gold & Aqua Colored Rings Wallpaper

Created by Dr-Pen

Abstract Colorful 4K Wallpaper

Created by abdelrahman

Abstract Universe Wallpaper

Created by KosmicAC

More Desktop Wallpapers

The post 25+ Stunning Colorful & Abstract 4K Desktop Wallpapers appeared first on Speckyboy Design Magazine.

They are both the foundation that guides the selection of colors to create harmony and balance in visual compositions. However, applying them effectively often requires more than just color knowledge.

These web-based color tools offer a range of functionalities, from generating harmonious palettes to ensuring color combinations meet accessibility standards. They will also make it easier to experiment with and apply color theory to real-world projects.

Whether you’re crafting a brand identity, a user interface, or any visual content, these free web-based color tools will help improve your design process by helping you make informed color decisions.

Tools for Creating Color Palettes

These tools will help you create custom color palettes by selecting and combining colors based on harmony rules, trends, or personal preferences.

AI Color Scheme Generators

Utilizing artificial intelligence, these generators produce color schemes by analyzing images, trends, or predefined inputs, offering innovative and cohesive color combinations.

Color Palette Collections for Inspiration

Here you will find curated collections of color palettes from other designers and brands, providing a source of inspiration for those looking to discover color combinations that work.

Color Accessibilty Tools

These tools ensure that color choices in design projects meet accessibility standards, helping create visuals that are clear and distinguishable for users with various types of color vision.

Miscellaneous Color Tools & Apps

Choosing the Right Color Tool

Each of these color tools offers unique features and capabilities, catering to the many different aspects of the design process. Try out various options to determine which color tool best aligns with your workflow and specific project requirements.

By doing so, you can enhance your design process, ensuring your projects stand out with the most fitting and appealing color schemes.

The post 20+ Web-Based Color Tools & Palette Generators for Designers appeared first on Speckyboy Design Magazine.

By integrating these extensions, you can significantly expand your browser’s capabilities, allowing for a more efficient and streamlined workflow. Browser customization will also allow you to create a workspace tailored to your specific needs, making it easier to tackle projects with precision and speed.

The extensions range from color pickers and font identifiers to more complex tools that help with coding, debugging, and optimizing user interfaces. The ability to quickly access these tools within the browser reduces the need to switch between different applications, saving time and reducing distractions.

Whether you’re a web professional or just starting out in web design, these Chrome extensions will help to enhance your design capabilities and improve your overall workflow.

Web Design & Developer Extensions

These extensions help with tasks like inspecting web elements and managing website versions. They are ideal for those who want to streamline their workflow and enhance productivity.

CSS Extensions for Chrome

Focused on CSS, these extensions assist in creating, testing, and debugging CSS code. Essential for web designers aiming to perfect their website’s look and feel.

Web Accessibility Extensions

Aimed at improving website accessibility, these tools help identify and fix accessibility issues. They check for compliance with standards like WCAG and ADA, offering suggestions to make websites usable for everyone.

Web Typography Chrome Extensions

These extensions offer functionalities like identifying fonts on websites, comparing font styles, and generating font pairings.

Color Tools for Chrome

These extensions can identify color codes from web pages, generate color palettes, and simulate color blindness. They are a must-have for designers looking to create cohesive and accessible color schemes.

Speed & Performance Extensions

These extensions analyze website speed and performance. They provide insights into factors slowing down a site, such as large images or unoptimized code, and offer recommendations for improvements.

Useful Web Design Utilities

Includes various extensions that support common web design tasks, from screen capturing to wireframing. They are designed to enhance efficiency and creativity in the web design process.

Streamline Your Workflow

These Chrome extensions will not only help to improve your productivity but also inspire creativity, allowing you to work more efficiently. By extending Chrome’s capabilities, these extensions provide a customized experience that can be tailored to fit any project’s requirements.

Finding the right set of browser tools can transform your workflow, making every project smoother and more manageable. Whether you’re looking for ways to streamline coding, enhance design elements, or optimize user interfaces, there’s likely an extension here that meets your needs.

The post 25 Essential Chrome Extensions for Web Designers & Developers appeared first on Speckyboy Design Magazine.

For example, taking a black and white photograph and adding partial color effects to certain key points of the shot is one of the most popular techniques amongst professional photographers.

This technique allows you to transform dull and boring black and white images into mesmerizing works of art with just a hint of color. Take a look at the examples featured below and you will begin to understand why this partial color effect is so popular.

Take for example the Yellow City image. A normally busy intersection takes on a whole different meaning when all you immediately see is the taxi cabs. It can also highlight the passage of time and it does a great job of drawing our attention to the most important part of the photo, without it feeling like it is being drowned in the noise of the surrounding color. It can make the ordinary seem extraordinary. It can make us feel something more powerfully.

So without further ado, take a look at some of the best examples of black and white photos that use a splash of color. Use them as an inspiration and don’t forget to check out the related tutorials to help you recreate those effects in your own photos.

Gallery of B&W Photos with Color Effects

Tutorials & Resources

• Black and White with a Splash of Colour (Photoshop Tutorial)
• Mono, with a Dash of Colour (Photoshop Tutorial)
• Black and White… with the occasional splash of colour (Beautiful Examples)

The post 40 Black & White Photos with Partial Color Effects appeared first on Speckyboy Design Magazine.