개발 환경

Rails 5.2.4.1
루비 2.4.0

전제

devise 도입됨
user에 color 열 추가

참고 URL

색상 지정이 자유자재! 컬러 피커를 출현시키는 jQuery 플러그인 "Bootstrap Color Picker Sliders"
Bootstrap Color Picker Sliders

정리한 경위

자체 서비스에서 Gantt 차트를 만들 때,
자신의 색을 붙이는 것으로 알기 쉽게 하려고 했습니다.

사용법

소스 다운로드 ↓

Github 부터
파일 다운로드

라이브러리 로드

jQuery, Bootstrap, tinyColor에 의존하기 때문에 먼저로드
(여기 생략)

표시 방법

index.haml

...
= f.text_field :color, id: 'hsvflat', autofocus: true, autocomplete: 'color'

js 초기화

index.haml

<script>
  $("#hsvflat").ColorPickerSliders({
    color: "#F44336",
    placement: 'right',
    sliders: false,
    swatches: ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B', '#000000', '#FFFFFF'],
    hsvpanel: false
  });
</script>

이런 느낌이 될거야