색상CSS Color 4

HTML & CSS Color Replace (색상 일괄 변환)

CSS나 HTML을 붙여넣으면 그 안의 색상 코드만 골라 HEX·RGB·HSL·OKLCH로 한 번에 바꿉니다. 바뀐 자리를 원본과 나란히 놓고 확인할 수 있습니다.

before

파일 선택

:root {
  --brand: #007aff;
  --danger: #ff3b30;
  --surface: rgb(247 247 247);
}

.btn {
  color: #FFFFFF;
  background: var(--brand);
  border: 1px solid #dddddd;
}

<div class="bg-[#1a2b3c] text-[#fff] hover:bg-[#0a1a2c]">
  <span class="text-blue-500">팔레트 이름은 건드리지 않습니다</span>
</div>

after

:root {
  --brand: oklch(0.603 0.218 257.4);
  --danger: oklch(0.654 0.232 28.7);
  --surface: rgb(247 247 247);
}

.btn {
  color: oklch(1 0 0);
  background: var(--brand);
  border: 1px solid oklch(0.898 0 0);
}

<div class="bg-[oklch(0.283 0.039 249.3)] text-[oklch(1 0 0)] hover:bg-[oklch(0.214 0.042 252.8)]">
  <span class="text-blue-500">팔레트 이름은 건드리지 않습니다</span>
</div>

7개 바꿈 · 1개는 HEX 가 아니라 그대로 뒀습니다

색만 골라 바꿉니다

CSS나 HTML을 통째로 넣으면 그 안의 색 값만 찾아 다른 형식으로 바꿉니다. 나머지 코드는 한 글자도 건드리지 않습니다.

before에서 형식 하나를 고르면 그 형식으로 적힌 색만 바뀝니다. 예를 들어 HEX → OKLCH를 고르면 rgb(...)로 적힌 색은 그대로 두고 몇 개를 그냥 뒀는지 알려줍니다.

`모두`는 형식을 가리지 않습니다

before의 맨 앞 모두 를 고르면 어느 형식으로 적혔든 전부 바꿉니다. HEX와 RGB가 섞인 파일을 두 번 돌리지 않아도 됩니다.

이때는 이미 after 형식으로 적힌 색도 함께 걸립니다. 모두 → HEX(#ffffff)에서 #FFF는 #ffffff가 됩니다 — 같은 색이지만 적는 법이 다르므로 바뀐 것입니다. 반대로 다시 적어도 글자가 하나도 달라지지 않는 색은 바꾼 개수에 넣지 않고 표시도 하지 않습니다. 안 바뀐 자리에 색이 칠해지면 어디를 봐야 하는지 알 수 없기 때문입니다.

Tailwind의 임의값도 같이 잡힙니다

bg-[#1a2b3c]의 대괄호 안은 그냥 색 값입니다. 그래서 CSS와 똑같은 방법으로 걸립니다 — 언어별 파서가 따로 필요하지 않습니다.

.btn { color: #007aff; }          →  .btn { color: oklch(0.603 0.218 257.4); }
<div class="bg-[#1a2b3c]">        →  <div class="bg-[oklch(0.283 0.039 249.5)]">

bg-blue-500 같은 팔레트 이름은 건드리지 않습니다. 그건 색 값이 아니라 이름이라, 바꾸려면 팔레트 표를 들고 있어야 하고 그건 다른 기능입니다.

나란히 놓고 봅니다

바뀐 자리를 before는 붉은색, after는 푸른색 배경으로 칠합니다.

줄을 접지 않고 가로로 흘립니다. 소스코드는 줄이 길고, 접으면 원래 모양이 무너져 어디가 어딘지 알 수 없게 됩니다.

두 판의 스크롤은 가로·세로 모두 맞물립니다. 색 하나가 색 하나로 바뀔 뿐이라 줄이 늘거나 줄지 않으므로, 같은 줄이 언제나 같은 높이에 섭니다. 줄 번호는 세로만 따라갑니다 — 가로까지 밀리면 번호가 화면 밖으로 나갑니다.

파일

왼쪽 판에 파일을 끌어다 놓거나 파일 선택을 누르면 됩니다. 5 MB까지 받습니다 — Tailwind를 쓴 HTML 한 장이 그만큼 나오기 때문입니다.

저장하면 넣은 파일 이름을 그대로 씁니다. 고친 것을 제자리에 덮어쓰는 일이라 이름을 바꿀 이유가 없습니다.

큰 파일은 앞부분만 그립니다

10만 자를 넘으면 화면에는 앞부분만 나오고, 그동안 왼쪽은 고칠 수 없습니다. 화면에 없는 뒷부분이 편집 중에 조용히 사라지는 것을 막기 위해서입니다.

복사와 저장은 언제나 전체가 됩니다. 바꾼 개수도 전체 기준입니다 — 화면에 다 보이지 않을 뿐 값이 잘린 것은 아닙니다.

이 한도는 그리는 비용 때문입니다. 색을 다 찾아 바꾸는 계산은 2 MB짜리라도 0.2초면 끝나지만, 그 결과를 화면에 그리는 데는 27초가 걸립니다. 글자를 칠 때마다 드는 비용이라 그리는 양을 묶어 둡니다.

알파는 지켜집니다

rgba(255, 0, 0, 0.3)을 HEX로 바꾸면 #ff00004d가 됩니다. 형식마다 적는 법이 달라도 투명도는 그대로 옮겨집니다.