[css] CSS (자바 스크립트)에 따라 색상을 밝거나 어둡게 동적으로 변경

우리는 사이트에 큰 응용 프로그램이 있으며 몇 가지 링크가 있습니다.이 사이트의 파란색 링크와 같은 파란색을 가정 해 봅시다. 이제 다른 링크를 만들고 싶지만 더 밝은 색상입니다. 분명히 CSS 파일에 16 진수 코드를 추가하여 간단하게 수행 할 수 있지만 사이트에서 사용자 정의 프로파일 / 사이트 (예 : Twitter)에 대해 원하는 색상을 결정할 수 있습니다.

내 질문은 : 색상을 백분율로 줄일 수 있습니까?

다음 코드가 CSS라고 가정 해 봅시다.

a {
  color: blue;
}

a.lighter {
  color: -50%; // obviously not correct way, but just an idea
}

또는

a.lighter {
  color: blue -50%;  // again not correct, but another example of setting color and then reducing it
}

색상을 백분율로 줄이는 방법이 있습니까?

답변

SASS 를 사용할 수있는 스택을 사용하는 경우 다음 기능을 사용할 수 있습니다 lighten.

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}

답변

모든 최신 브라우저에서 CSS 필터를 사용 하여 이를 수행 할 수 있습니다 ( 캐니 우스 호환성 표 참조 ).

.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}

<button class="button">Foo lorem ipsum</button>

스 니펫 확장

다음은 CSS 트릭에서 사용할 수있는 다양한 필터에 대한 자세한 내용입니다. https://css-tricks.com/almanac/properties/f/filter/

답변

배경을 비추는 “불투명도”가 있습니다.

opacity: 0.5;

하지만 이것이 당신이 무슨 뜻인지 잘 모르겠습니다. “색상 줄이기”정의 : 투명하게 만드시겠습니까? 아니면 흰색을 추가 하시겠습니까?

답변

HSL 색상은 대답을 제공하며 HSL 색상 값은 hsl (hue [0,255], 채도 %, 명도 %)로 지정됩니다.

HSL은 IE9 +, Firefox, Chrome, Safari 및 Opera 10+에서 지원됩니다.

a
{
color:hsl(240,65%,50%);
}
a.lighter 
{
color:hsl(240,65%,75%);
}

답변

글을 쓰는 시점에서 내가 찾은 색상 조작을위한 최고의 CSS 구현은 다음과 같습니다.

CSS 변수를 사용하여 HEX / RGB 형식 대신 HSL로 색상을 정의한 다음이를 사용하여 색상을 조정하십시오 calc().

기본 예는 다음과 같습니다.

:root {
  --link-color-h: 211;
  --link-color-s: 100%;
  --link-color-l: 50%;
  --link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l);

  --link-color: hsl(var(--link-color-hsl));
  --link-color-10: hsla(var(--link-color-hsl), .1);
  --link-color-20: hsla(var(--link-color-hsl), .2);
  --link-color-30: hsla(var(--link-color-hsl), .3);
  --link-color-40: hsla(var(--link-color-hsl), .4);
  --link-color-50: hsla(var(--link-color-hsl), .5);
  --link-color-60: hsla(var(--link-color-hsl), .6);
  --link-color-70: hsla(var(--link-color-hsl), .7);
  --link-color-80: hsla(var(--link-color-hsl), .8);
  --link-color-90: hsla(var(--link-color-hsl), .9);

  --link-color-warm: hsl(calc(var(--link-color-h) + 80), var(--link-color-s), var(--link-color-l));
  --link-color-cold: hsl(calc(var(--link-color-h) - 80), var(--link-color-s), var(--link-color-l));

  --link-color-low: hsl(var(--link-color-h), calc(var(--link-color-s) / 2), var(--link-color-l));
  --link-color-lowest: hsl(var(--link-color-h), calc(var(--link-color-s) / 4), var(--link-color-l));

  --link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9));
  --link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9));
}

.flex {
  display: flex;
}

.flex > div {
  flex: 1;
  height: calc(100vw / 10);
}

<h3>Color Manipulation (alpha)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-10)"></div>
  <div style="background-color: var(--link-color-20)"></div>
  <div style="background-color: var(--link-color-30)"></div>
  <div style="background-color: var(--link-color-40)"></div>
  <div style="background-color: var(--link-color-50)"></div>
  <div style="background-color: var(--link-color-60)"></div>
  <div style="background-color: var(--link-color-70)"></div>
  <div style="background-color: var(--link-color-80)"></div>
  <div style="background-color: var(--link-color-90)"></div>
  <div style="background-color: var(--link-color)"></div>
</div>

<h3>Color Manipulation (Hue)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-warm)"></div>
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-cold)"></div>
</div>

<h3>Color Manipulation (Saturation)</h3>

<div class="flex">
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-low)"></div>
  <div style="background-color: var(--link-color-lowest)"></div>
</div>

<h3>Color Manipulation (Lightness)</h3>

<div class="flex">
  <div style="background-color: var(--link-color-light)"></div>
  <div style="background-color: var(--link-color)"></div>
  <div style="background-color: var(--link-color-dark)"></div>
</div>

스 니펫 확장

또한 루트 프레임 변수라는 기본 CSS 변수 지원을 제공하기 위해 CSS 프레임 워크 (아직 초기 단계)를 만들었습니다 .

답변

LESS에서는 다음 변수를 사용합니다.

@primary-color: #999;
@primary-color-lighter: lighten(@primary-color, 20%);

이것은 첫 번째 변수를 가져 와서 20 % (또는 다른 백분율)만큼 밝게 만듭니다. 이 예에서는 더 밝은 색상으로 끝납니다.#ccc

답변

더 어두운 색상을 원하면 rgba불투명도가 낮은 검은 색을 사용할 수 있습니다 .

rgba(0,0,0,0.3)

더 밝은 흰색을 사용하는 경우 :

rgba(255,255,255,0.3).