[Front-end] 13)CSS 색이론으로 보는 꿀팁

Codecademy front-end engineer course

DAY13

• Learn CSS: Documentation&Debugging
• Learn CSS: Color Theory

---

 

Documentation is an essential tool to learn about properties.

1.  MDN

the source of documentation for HTML, CSS, and JavaScript.

https://developer.mozilla.org/ko/

MDN Web Docs

2. Stackoverflow

stackoverflow.com/

Stack Overflow - Where Developers Learn, Share, & Build Careers

 

---

 

-The Color Wheel [색상 팔레트]

: Three color groups: primary, secondary and tertiary

->equidistant to each other on the wheel, forming a triangle

 

 

-HSLA is the preferred syntax. 

->For example, you get feedback on your design that one color needs to be a little brighter, that can be translated to intuitive changes within HSLA

 

https://dlxl-min.tistory.com/24?category=908235

[Codecademy] 7)CSS Color

 

 

-Warm Color [따뜻한 색]

: evoke a sense of warmth and also promote a feeling of aggression and are considered bold

.first-color {
  background-color: hsla(4, 100%, 50%, 1);
}
.second-color {
  background-color: hsla(12, 100%, 50%, 1);
}
.third-color {
  background-color: hsla(23, 100%, 50%, 1);
}
.fourth-color {
  background-color: hsla(38, 100%, 50%, 1);
}
.fifth-color {
  background-color: hsla(53, 100%, 50%, 1);
}

 

 

- Cool color [차가운 색]

: Cool colors are given this designation because of their calming, soothing nature.

They’re often associated with winter climates or water.

.first-color {
  background-color: hsla(270, 100%, 50%, 1);
}
.second-color {
  background-color: hsla(250, 100%, 50%, 1);
}
.third-color {
  background-color: hsla(210, 100%, 50%, 1);
}
.fourth-color {
  background-color: hsla(180, 100%, 50%, 1);
}
.fifth-color {
  background-color: hsla(150, 100%, 50%, 1);
}

 

 

- Tints and Shades [색조 및 음영]

1) Tints occur when white is applied to a color, adding or increasing the lightness of a hue

2) Shades are created when black is added to a color, which decreases the lightness of a hue

*L for lightness. This starts at 0% (black) and ranges to 100% (white)

.first-color {
  background-color: hsla(240, 100%, 30%, 1);
}
.second-color {
  background-color: hsla(240, 100%, 40%, 1);
}
.third-color {
  background-color: hsla(240, 100%, 50%, 1);
}
.fourth-color {
  background-color: hsla(240, 100%, 60%, 1);
}
.fifth-color {
  background-color: hsla(240, 100%, 70%, 1);
}

 

 

-Color Schemes [색 팔레트]

Color schemes (or color palettes) are the result of pairing two or more colors together

 

 

1) Monochromatic Designs [단색]

: utilizes a single color with varying shades and tints to create a monochromatic palette.

*These monochromatic color schemes are beneficial in that they provide an organized impression when applied to your designs

 

 

2) Complementary Designs [보색]

: utilizes colors opposite from each other on the color wheel.

*These complementary schemes provide a dramatic display of color, which can be applied to websites as well.

 

 

3) Analogous Color Schemes -> a low-contrast  [유사한 색]

: Analogous color schemes apply three or more colors that are adjacent to each other on the color wheel.

* there is one dominant color (or hue), combined with a second to support, and a third to accent the color palette.

(create a visually pleasing and calming display)

!They shouldn’t be used for content that needs the user’s direct attention!

 

 

4) Triadic Color Schemes [3개의 색]

: like complementary schemes, provide additional pops of color while allowing for some flexibility in the range you can use.

-These consist of three colors that are equidistant from each other on the color wheel.

(they create a sense of equality, vibrancy, and security in your designs.)

 

-Color Psychology [색과 심리]

: Every color has a different context and meaning, and color psychology can impact how people perceive a design and relate to the colors used.

Choosing the right colors can help nonverbally communicate the context and emotion of a product or service.

 

- Best Practices

Use neon colors sparingly. ->While the use of neon colors can feel hip, they are often hard on a user’s eyes.

Avoid vibrating colors. -> It creates a glowing or moving effect, which also can be hard on one’s eyes.

Use backdrops to separate vibrating colors. -> reduces the space where the contrasting colors are directly next to each other (from pairing two high-saturated colors together, even while they may be complementary to one another)

Avoid color combinations with insufficient contrast Bright colors on top of bright colors Light colors on top of light colors Dark colors on top of dark colors

 

독자는 웹을 not read(읽지 않고), skim(대충 훑어본다)한다는 사실을 잊지 말자.

*Remember to use colors opposite of each other when setting your text color.

 

 

 

-참고하면 좋을 색조합 사이트

color.adobe.com/ko/create/color-wheel

https://color.adobe.com/ko/create/color-wheel

 

---

예제로 만든 색조합 사이트.