Overview
Generate a palette from a base color, compare foreground and background contrast, and export CSS variables for your design.
This guide explains how to install WPSDDC Color Shades, set up its options and use it in your everyday WordPress workflow.
Requirements and Compatibility
- WordPress 6.0 or later.
- PHP 8.1 or later.
- An account with permission to install and activate plugins. Site settings require administrator permissions.
It works independently: WP StudioDDC HQ and other collection plugins are not required to register its administration screen.
Installation
- Obtain the installable WPSDDC Color Shades ZIP package and keep a current site backup before installation.
- In the dashboard, open Plugins → Add New Plugin → Upload Plugin.
- Select the ZIP file, choose Install Now and then Activate Plugin.
- Open WPSDDC → Color Shades to access its controls and usage information.
For manual installation, copy the wpsddc-color-shades folder into wp-content/plugins/ and activate the plugin from Plugins. The package entry file is wpsddc-color-shades.php.
Configuration and Options
Open WPSDDC → Color Shades, review the options below and save the features you intend to use. These are initial values; previously saved settings can differ.
| Setting | Initial Value | Options |
|---|---|---|
| Base Color | #2271b1 | Hexadecimal color |
| Text Color for Contrast Check | #1d2327 | Hexadecimal color |
| Background Color for Contrast Check | #ffffff | Hexadecimal color |
How to Use the Plugin
- Open WPSDDC → Color Shades and enter the base color you want to work with.
- Set the foreground and background colors used by the contrast comparison, then save the values.
- Review the generated palette and the numerical contrast result for the selected pair.
- Copy or export the CSS variables and add the values you choose to the stylesheet of your own project.
- Check the actual text size, weight and interactive states in the resulting interface.
Practical Example
Compare a body-text color against its intended page background before using the exported variables. Repeat the comparison for hover and focus states that use different colors.
Data and Operating Limits
Calculations and settings stay local. The utility does not change the administration color scheme or contact a remote service. A contrast result alone does not certify an interface as accessible.
Frequently Asked Questions
Does a passing contrast result certify accessibility?
No. Contrast is one check. Review keyboard access, focus, labels, text sizes and the rest of the interface as well.
Where can I find the included help?
Open WPSDDC → Color Shades and expand the native Help tab at the top of the screen. Its sections explain getting started, data and limits, and version details and support links.
Troubleshooting
If the website appearance does not change after saving a color, apply the exported variables in your theme or stylesheet. This utility does not replace the WordPress admin color scheme or rewrite your theme styles.
Updates and Deactivation
- Back up the database and files before updating.
- When WordPress offers an update in Plugins, use its native update action. To update by ZIP, upload the new package and choose to replace the installed version when WordPress prompts you.
- Review the changes included with the package, keep the settings you need and check a typical workflow after updating.
To stop the feature, deactivate the plugin from Plugins. Deactivation does not delete WordPress content and does not replace a backup.
Support and Related Links
For support, include the WordPress, PHP and plugin versions, the relevant setting and the steps needed to reproduce the issue. Share only the information needed to describe it.