body–wp–preset–color–black: #000000;–wp–preset–color–cyan-bluish-gray: #abb8c3;–wp–preset–color–white: #ffffff;–wp–preset–color–pale-pink: #f78da7;–wp–preset–color–vivid-red: #cf2e2e;–wp–preset–color–luminous-vivid-orange: #ff6900;–wp–preset–color–luminous-vivid-amber: #fcb900;–wp–preset–color–light-green-cyan: #7bdcb5;–wp–preset–color–vivid-green-cyan: #00d084;–wp–preset–color–pale-cyan-blue: #8ed1fc;–wp–preset–color–vivid-cyan-blue: #0693e3;–wp–preset–color–vivid-purple: #9b51e0;–wp–preset–color–contrast: var(–contrast);–wp–preset–color–contrast-2: var(–contrast-2);–wp–preset–color–contrast-3: var(–contrast-3);–wp–preset–color–base: var(–base);–wp–preset–color–base-2: var(–base-2);–wp–preset–color–base-3: var(–base-3);–wp–preset–color–accent: var(–accent);–wp–preset–color–accent-2: var(–accent-2);–wp–preset–color–accent-hover: var(–accent-hover);–wp–preset–gradient–vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);–wp–preset–gradient–light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);–wp–preset–gradient–luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);–wp–preset–gradient–luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);–wp–preset–gradient–very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);–wp–preset–gradient–cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);–wp–preset–gradient–blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);–wp–preset–gradient–blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);–wp–preset–gradient–luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);–wp–preset–gradient–pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);–wp–preset–gradient–electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);–wp–preset–gradient–midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);–wp–preset–duotone–dark-grayscale: url(‘#wp-duotone-dark-grayscale’);–wp–preset–duotone–grayscale: url(‘#wp-duotone-grayscale’);–wp–preset–duotone–purple-yellow: url(‘#wp-duotone-purple-yellow’);–wp–preset–duotone–blue-red: url(‘#wp-duotone-blue-red’);–wp–preset–duotone–midnight: url(‘#wp-duotone-midnight’);–wp–preset–duotone–magenta-yellow: url(‘#wp-duotone-magenta-yellow’);–wp–preset–duotone–purple-green: url(‘#wp-duotone-purple-green’);–wp–preset–duotone–blue-orange: url(‘#wp-duotone-blue-orange’);–wp–preset–font-size–small: 13px;–wp–preset–font-size–medium: 20px;–wp–preset–font-size–large: 36px;–wp–preset–font-size–x-large: 42px;–wp–preset–spacing–20: 0.44rem;–wp–preset–spacing–30: 0.67rem;–wp–preset–spacing–40: 1rem;–wp–preset–spacing–50: 1.5rem;–wp–preset–spacing–60: 2.25rem;–wp–preset–spacing–70: 3.38rem;–wp–preset–spacing–80: 5.06rem;:where(.is-layout-flex)gap: 0.5em;body .is-layout-flow > .alignleftfloat: left;margin-inline-start: 0;margin-inline-end: 2em;body .is-layout-flow > .alignrightfloat: right;margin-inline-start: 2em;margin-inline-end: 0;body .is-layout-flow > .aligncentermargin-left: auto !important;margin-right: auto !important;body .is-layout-constrained > .alignleftfloat: left;margin-inline-start: 0;margin-inline-end: 2em;body .is-layout-constrained > .alignrightfloat: right;margin-inline-start: 2em;margin-inline-end: 0;body .is-layout-constrained > .aligncentermargin-left: auto !important;margin-right: auto !important;body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))max-width: var(–wp–style–global–content-size);margin-left: auto !important;margin-right: auto !important;body .is-layout-constrained > .alignwidemax-width: var(–wp–style–global–wide-size);body .is-layout-flexdisplay: flex;body .is-layout-flexflex-wrap: wrap;align-items: center;body .is-layout-flex > *margin: 0;:where(.wp-block-columns.is-layout-flex)gap: 2em;.has-black-colorcolor: var(–wp–preset–color–black) !important;.has-cyan-bluish-gray-colorcolor: var(–wp–preset–color–cyan-bluish-gray) !important;.has-white-colorcolor: var(–wp–preset–color–white) !important;.has-pale-pink-colorcolor: var(–wp–preset–color–pale-pink) !important;.has-vivid-red-colorcolor: var(–wp–preset–color–vivid-red) !important;.has-luminous-vivid-orange-colorcolor: var(–wp–preset–color–luminous-vivid-orange) !important;.has-luminous-vivid-amber-colorcolor: var(–wp–preset–color–luminous-vivid-amber) !important;.has-light-green-cyan-colorcolor: var(–wp–preset–color–light-green-cyan) !important;.has-vivid-green-cyan-colorcolor: var(–wp–preset–color–vivid-green-cyan) !important;.has-pale-cyan-blue-colorcolor: var(–wp–preset–color–pale-cyan-blue) !important;.has-vivid-cyan-blue-colorcolor: var(–wp–preset–color–vivid-cyan-blue) !important;.has-vivid-purple-colorcolor: var(–wp–preset–color–vivid-purple) !important;.has-black-background-colorbackground-color: var(–wp–preset–color–black) !important;.has-cyan-bluish-gray-background-colorbackground-color: var(–wp–preset–color–cyan-bluish-gray) !important;.has-white-background-colorbackground-color: var(–wp–preset–color–white) !important;.has-pale-pink-background-colorbackground-color: var(–wp–preset–color–pale-pink) !important;.has-vivid-red-background-colorbackground-color: var(–wp–preset–color–vivid-red) !important;.has-luminous-vivid-orange-background-colorbackground-color: var(–wp–preset–color–luminous-vivid-orange) !important;.has-luminous-vivid-amber-background-colorbackground-color: var(–wp–preset–color–luminous-vivid-amber) !important;.has-light-green-cyan-background-colorbackground-color: var(–wp–preset–color–light-green-cyan) !important;.has-vivid-green-cyan-background-colorbackground-color: var(–wp–preset–color–vivid-green-cyan) !important;.has-pale-cyan-blue-background-colorbackground-color: var(–wp–preset–color–pale-cyan-blue) !important;.has-vivid-cyan-blue-background-colorbackground-color: var(–wp–preset–color–vivid-cyan-blue) !important;.has-vivid-purple-background-colorbackground-color: var(–wp–preset–color–vivid-purple) !important;.has-black-border-colorborder-color: var(–wp–preset–color–black) !important;.has-cyan-bluish-gray-border-colorborder-color: var(–wp–preset–color–cyan-bluish-gray) !important;.has-white-border-colorborder-color: var(–wp–preset–color–white) !important;.has-pale-pink-border-colorborder-color: var(–wp–preset–color–pale-pink) !important;.has-vivid-red-border-colorborder-color: var(–wp–preset–color–vivid-red) !important;.has-luminous-vivid-orange-border-colorborder-color: var(–wp–preset–color–luminous-vivid-orange) !important;.has-luminous-vivid-amber-border-colorborder-color: var(–wp–preset–color–luminous-vivid-amber) !important;.has-light-green-cyan-border-colorborder-color: var(–wp–preset–color–light-green-cyan) !important;.has-vivid-green-cyan-border-colorborder-color: var(–wp–preset–color–vivid-green-cyan) !important;.has-pale-cyan-blue-border-colorborder-color: var(–wp–preset–color–pale-cyan-blue) !important;.has-vivid-cyan-blue-border-colorborder-color: var(–wp–preset–color–vivid-cyan-blue) !important;.has-vivid-purple-border-colorborder-color: var(–wp–preset–color–vivid-purple) !important;.has-vivid-cyan-blue-to-vivid-purple-gradient-backgroundbackground: var(–wp–preset–gradient–vivid-cyan-blue-to-vivid-purple) !important;.has-light-green-cyan-to-vivid-green-cyan-gradient-backgroundbackground: var(–wp–preset–gradient–light-green-cyan-to-vivid-green-cyan) !important;.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-backgroundbackground: var(–wp–preset–gradient–luminous-vivid-amber-to-luminous-vivid-orange) !important;.has-luminous-vivid-orange-to-vivid-red-gradient-backgroundbackground: var(–wp–preset–gradient–luminous-vivid-orange-to-vivid-red) !important;.has-very-light-gray-to-cyan-bluish-gray-gradient-backgroundbackground: var(–wp–preset–gradient–very-light-gray-to-cyan-bluish-gray) !important;.has-cool-to-warm-spectrum-gradient-backgroundbackground: var(–wp–preset–gradient–cool-to-warm-spectrum) !important;.has-blush-light-purple-gradient-backgroundbackground: var(–wp–preset–gradient–blush-light-purple) !important;.has-blush-bordeaux-gradient-backgroundbackground: var(–wp–preset–gradient–blush-bordeaux) !important;.has-luminous-dusk-gradient-backgroundbackground: var(–wp–preset–gradient–luminous-dusk) !important;.has-pale-ocean-gradient-backgroundbackground: var(–wp–preset–gradient–pale-ocean) !important;.has-electric-grass-gradient-backgroundbackground: var(–wp–preset–gradient–electric-grass) !important;.has-midnight-gradient-backgroundbackground: var(–wp–preset–gradient–midnight) !important;.has-small-font-sizefont-size: var(–wp–preset–font-size–small) !important;.has-medium-font-sizefont-size: var(–wp–preset–font-size–medium) !important;.has-large-font-sizefont-size: var(–wp–preset–font-size–large) !important;.has-x-large-font-sizefont-size: var(–wp–preset–font-size–x-large) !important;

by

“

What does body–wp–preset–color code mean?

Body–wp–preset–color code is a set of specialized CSS codes connected to the WordPress platform. These codes are used to adjust the default settings for background, text, and font color and display on different platforms, such as the Desktop vs Mobile view.

When is this code used?

This code is usually used when designing a website in WordPress, so that the design is consistent across any device(s) and platform(s) being used to view the website. The code helps create a uniform look and presentation, making the website look professional and organized.



How to use body–wp–preset–color code?

Using body–wp–preset–color codes is simple and easy. It only requires adding the codes to the HTML elements or WordPress themes. Once the codes are added, the designers and creators can customize the background, text, and font color settings according to their requirements.

  • Step 1: Go to the HTML file and define the code sets as per the following code:

    • body--wp--preset--color--black: #000000;

    body--wp--preset--color--cyan-bluish-gray: #abb8c3;

    body--wp--preset--color--white: #ffffff;

    body--wp--preset--color--pale-pink: #f78da7;

  • Step 2: After you have the code sets defined, apply them to the relevant styling classes:

    • .primary-color {color: body--wp--preset--color--black;}

    .secondary-color {color: body--wp--preset--color--cyan-bluish-gray;}

    .third-color {color: body--wp--preset--color--white;}

    .fourth-color {color: body--wp--preset--color--pale-pink;}

  • Step 3: As you can see, those classes are used in the HTML code to add to the style of the webpage. Apply these classes wherever necessary to create the custom color settings in the design.

## CSS Colors Presets Explained

In web development, one of the major points of focus is creating attractive and aesthetically pleasing designs. Color is one of the most important elements in design, so it’s important to be able to use the right colors and apply them correctly. CSS provides us with a number of preset color options that can help you quickly and easily create an appealing design without having to manually specify every single color.

### What are CSS Colors Presets?

CSS color presets are a set of predefined color names that allow you to quickly and conveniently set a particular color on an element. They are defined as a string of characters and can be used to set a color for any of the elements in the Document Object Model (DOM).

The available presets are simple to apply and can be used for any color that is supported by the CSS language. Here is the full list of available CSS color presets:



| Color Name | Hex Code |

| ———————|:—————:|

| Black | #000000 |

| Cyan-Bluish Gray | #ABB8C3 |

| White | #FFFFFF |

| Pale Pink | #F78DA7 |

| Vivid Red | #CF2E2E |

| Luminous Vivid Orange | #FF6900 |

| Luminous Vivid Amber | #FCB900 |

| Light Green-Cyan | #7BDCB5 |

| Vivid Green-Cyan | #00D084 |

| Pale Cyan-Blue | #8ED1FC |

| Vivid Cyan-Blue | #0693E3 |

| Vivid Purple | #9B51E0


Related Posts

  1. Is All 14K Gold Jewelry Marked
  2. What Is Jadau Jewelry
  3. What Happened To Tupac’S Jewelry
  4. Is Only One Jewelry Legit
READ
Is Tiffany Jewelry Worth The Money


Send this to a friend