Markdown에서 색상 코드의 색상 견본 보기 Tips

제품의 브랜드 칼라에 관한 정보를 Markdown에서 문서화할 때 등에, 칼라 코드 뿐만이 아니라 색견본을 볼 수 있는 쪽이 시각적으로 알기 쉬우거나 합니다.

이 게시물에서는 Markdown에서 색상 코드의 색상 견본을 이미지로 표시하는 방법을 소개합니다.

Markdown에서 컬러 코드 견본을 표시하는 방법

htps : // p ぁ세호 l에서 r. 코m/이라는 더미 이미지를 URL로 지정하여 생성할 수 있는 서비스를 사용합니다.

![](https://via.placeholder.com/16/c7e7f6/FFFFFF/?text=%20) `#c7e7f6`
![](https://via.placeholder.com/16/abdbf1/FFFFFF/?text=%20) `#abdbf1`
![](https://via.placeholder.com/16/6ec1e9/FFFFFF/?text=%20) `#6ec1e9`
![](https://via.placeholder.com/16/47b1e1/FFFFFF/?text=%20) `#47b1e1`
![](https://via.placeholder.com/16/0093d6/FFFFFF/?text=%20) `#0093d6`
![](https://via.placeholder.com/16/221816/FFFFFF/?text=%20) `#221816`

↓ 예를 들어 GitHub에서는 다음과 같이 표시됩니다.



Qiita라고 하면, 코드로 쓴 컬러 코드는 #c7e7f6와 같이 자동으로 색견본이 붙는 친절 설계이므로, Qiita에서는 불필요한 테크닉입니다만, GitHub의 README.md나 Issue, Qiita:Team 이외의 사내 지식 공유 툴, Markdown에 대응한 과제 관리 툴 등으로 활용해 주세요.

끝까지 읽어 주셔서 감사합니다. Twitter에서는, Qiita에 쓰지 않는 기술 재료 등도 트윗하고 있으므로, 좋으면 팔로우해 주시면 기쁩니다 → Twitter@suin