CSS 필터 생성기

CSS filter 속성은 파일을 편집하지 않고도 어떤 요소, 이미지, 동영상에든 흐림, 밝기, 대비, 흑백, 세피아, 색조 회전, 반전, 그림자 같은 사진 효과를 적용합니다. 이 생성기는 슬라이더나 프리셋으로 값을 만들고 샘플 장면에서 브라우저로 미리 보여 줍니다. 두 번째 모드는 "검은 SVG 아이콘을 CSS로 #2563EB로 바꾸려면?"이라는 흔한 문제를 풉니다. 검정을 목표 색으로 바꾸는 필터 체인을 탐색하고 얼마나 가까워졌는지 알려 줍니다.

사용 방법

1. "필터 만들기"를 고르고 값을 설정하거나, 흑백이나 빈티지 같은 프리셋을 고릅니다.
2. 필요하면 내용물의 윤곽을 따라가는 그림자를 추가합니다.
3. 아이콘 색을 바꾸려면 "검은 아이콘 색 바꾸기"로 전환하고, 목표 색을 입력한 뒤 "먼저 아이콘을 검게 만들기"를 켜 둡니다.
4. CSS를 복사합니다. 색 바꾸기 모드에서는 색 오차를 확인하고 2보다 크면 다른 시드를 시도하세요.

계산식

brightness: C′ = C × b · contrast: C′ = (C − 0.5) × c + 0.5 · invert: C′ = i + C × (1 − 2i) · sepia, saturate, hue-rotate: 3 × 3 color matrices from the Filter Effects spec

C는 0에서 1 사이의 채널 값이고 각 단계의 결과는 0–1로 제한됩니다. 색 바꾸기 계산기는 검정에서 시작해 이 공식을 계산하며, invert, sepia, saturate, hue-rotate, brightness, contrast에 대해 동시 섭동 확률 근사(시드가 있는 무작위 탐색)를 쓰고 RGB와 HSL 차이로 점수를 매깁니다.

예시

기본값은 filter: brightness(110%) contrast(120%) saturate(130%);로, 더 선명한 사진이 됩니다. 흑백 프리셋은 grayscale(100%) contrast(110%)입니다. 흰색 아이콘은 invert(100%)만으로 검정이 흰색이 되므로 오차가 거의 없는 체인을 찾습니다. 파랑 #2563EB은 시드 1에서 ΔE 2 이내에 들어오며, 아이콘 크기에서는 눈에 띄지 않을 만큼 작은 차이입니다.