Submitted over 1 year ago

Building Project using React

react

vuson1709•120

@vuson1709

A solution to the Interactive rating component challenge

Preview Code

Solution retrospective

I have issue when choosing color. In style-guide.md of the project, it requires me to use these color:

:root {
  /* ### Primary */
  --orange: hsl(25, 97%, 53%);

  /* ### Neutral */
  --white: hsl(0, 0%, 100%);
  --light-grey: hsl(217, 12%, 63%);
  --medium-grey: hsl(216, 12%, 54%);
  --dark-blue: hsl(213, 19%, 18%);
  --very-dark-blue: hsl(216, 12%, 8%);
}

When apply color for numbers, I tried all colors above but can't use correct color as in design images.

Code

Please log in to post a comment

Community feedback

Yonten•340
@yozidst
Posted over 1 year ago
Hi there 👋,

Yes, some of the challenges have one or two colors missing. Some browsers have those color eye droppers to pick up color codes on the web as an extension. Or you can sometimes for instance do the following:
```
root {
  --color-very-light-grey: hsla(217, 12%, 63%, 0.1);
```
hsla (a) - alpha: You can modify that to match similar colors with varied texture to create a different blend whether it be lighter or darker.

Hope that helps! Good Luck!
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord