CSS 디자인 15.5k 0

상단의 트게더 기본 로고를 이미지 편집없이 CSS만 이용해서 색상을 변경하는 방법입니다.

                 ↓

1. 먼저 설정할 색상 Hex Code를 준비합니다. 예시는 파란색 #127ad8 으로 진행하겠습니다.

2. https://codepen.io/sosuke/pen/Pjoqqp 에 접속하면 아래와 같은 화면이 나옵니다.

3. Target color에 준비한 Hex Code를 넣고 Compute Filters를 클릭하면 filter 값이 나옵니다.

compute 할때마다 결과가 다른데 Loss가 작은값으로 perfect 나올때까지 해서 정확한 filter값을 찾습니다.

Loss: 19.0. The color is extremely off. Run it again!

Loss: 11.6. The color is somewhat off. Consider running it again. 

Loss: 4.1. The is close enough.

Loss: 0.2. This is a perfect result.  

한번해서 바뀐 색상에서 다시 compute하면 필터값이 이상해지기 때문에 

다시할때는 새로고침 해서 처음 검은색 상태에서 해야 합니다.

4. 위에서 얻은 필터값으로 CSS 적용하면 됩니다.

/* 데스크톱 CSS */

header .row > div:nth-child(1) > a > img {
    filter: invert(49%) sepia(55%) saturate(7442%) hue-rotate(193deg) brightness(93%) contrast(86%);
}

/* 모바일 CSS */

header > #header-area > a > h1 {
    filter: invert(49%) sepia(55%) saturate(7442%) hue-rotate(193deg) brightness(93%) contrast(86%);
}