Submitted 9 months ago

Building Project using React

vuson1709• 120

@vuson1709

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

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.

Community feedback

Yonten• 340

@yozidst

Posted 9 months 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

Please log in to post a comment

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