Coolours
Turn AI-designed colour palettes into Coolours links, with colour names, CSS and contrast checks
사용해야 할까요
품질 및 안전성
도구 정의와 프로토콜 준수에 대한 자동 분석을 기반으로 합니다.
컨텍스트 비용
이는 서버의 도구가 모델의 컨텍스트에 로드될 때마다 소비되는 대략적인 토큰 수입니다. 수치가 높을수록 다른 작업에 사용할 수 있는 주의가 줄어듭니다.
설치
원클릭 설치
`claude_desktop_config.json` 파일에 다음을 추가하세요:
{
"mcpServers": {
"coolours": {
"url": "https://coolours.perpetualsummer.ltd/mcp"
}
}
}원격 엔드포인트
https://coolours.perpetualsummer.ltd/mcpstreamable-http할 수 있는 일
도구 목록
도구 (3)
🟢create_palette_link(colours, name)
Turn a colour palette you have chosen into a link that opens it in Coolours (coolours.perpetualsummer.ltd), where the user can preview the swatches, tweak them and export them. Use this whenever you propose a colour scheme, so the user can see it rather than read hex codes. Also returns WCAG contrast ratios for every pair of colours: check them before recommending a text/background pairing (4.5 or more for body text, 3 or more for large text and UI components). Returns each colour's Coolours name: use those names when presenting the palette. Also returns the palette as CSS custom properties: whenever you show CSS, use it exactly as given rather than writing your own. Give the user the URL.
입력 스키마
{
"type": "object",
"properties": {
"colours": {
"minItems": 1,
"maxItems": 20,
"type": "array",
"items": {
"type": "string"
},
"description": "Colours in display order. Hex (\"#1E293B\", \"#abc\"), rgb() or CSS colour names. No transparency."
},
"name": {
"description": "Palette name shown on the site, e.g. \"Fintech Dark\"",
"type": "string",
"maxLength": 100
}
},
"required": [
"colours"
],
"$schema": "http://json-schema.org/draft-07/schema#"
}출력 스키마
{
"type": "object",
"properties": {
"url": {
"type": "string"
},
"colours": {
"type": "array",
"items": {
"type": "object",
"properties": {
"hex": {
"type": "string"
},
"name": {
"type": "string"
}
},
"required": [
"hex",
"name"
],
"additionalProperties": false
},
"description": "Each colour with the name Coolours shows on its swatch"
},
"css": {
"type": "string",
"description": "CSS custom properties exactly as Coolours exports them. Use as given; variable names match the Coolours UI"
},
"contrast": {
"type": "array",
"items": {
"type": "object",
"properties": {
"foreground": {
"type": "string"
},
"background": {
"type": "string"
},
"ratio": {
"type": "number"
},
"wcag": {
"type": "string",
"enum": [
"AAA",
"AA",
"AA large",
"fail"
]
}
},
"required": [
"foreground",
"background",
"ratio",
"wcag"
],
"additionalProperties": false
}
}
},
"required": [
"url",
"colours",
"css",
"contrast"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}🟢parse_palette_link(url)
Read the colours and name back out of a Coolours link (coolours.perpetualsummer.ltd/create/...). Use this when the user pastes a Coolours URL, for example after editing a palette on the site, so you can apply their changes.
입력 스키마
{
"type": "object",
"properties": {
"url": {
"type": "string",
"description": "The full Coolours URL"
}
},
"required": [
"url"
],
"$schema": "http://json-schema.org/draft-07/schema#"
}출력 스키마
{
"type": "object",
"properties": {
"colours": {
"type": "array",
"items": {
"type": "object",
"properties": {
"hex": {
"type": "string"
},
"name": {
"type": "string"
}
},
"required": [
"hex",
"name"
],
"additionalProperties": false
},
"description": "Each colour with the name Coolours shows on its swatch"
},
"css": {
"type": "string",
"description": "CSS custom properties exactly as Coolours exports them. Use as given; variable names match the Coolours UI"
},
"name": {
"type": "string"
},
"ignored": {
"type": "array",
"items": {
"type": "string"
},
"description": "URL segments that are not valid swatches; the site ignores these too"
},
"contrast": {
"type": "array",
"items": {
"type": "object",
"properties": {
"foreground": {
"type": "string"
},
"background": {
"type": "string"
},
"ratio": {
"type": "number"
},
"wcag": {
"type": "string",
"enum": [
"AAA",
"AA",
"AA large",
"fail"
]
}
},
"required": [
"foreground",
"background",
"ratio",
"wcag"
],
"additionalProperties": false
}
}
},
"required": [
"colours",
"css",
"ignored",
"contrast"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}🟢export_palette(colours, format)
Export a palette as CSS custom properties or a JavaScript object, with each colour named after its nearest named colour. Output matches Coolours' own Export feature. create_palette_link already returns the CSS; use this for the JS object, or for a palette you didn't create. Use the output as given: its names match the Coolours UI.
입력 스키마
{
"type": "object",
"properties": {
"colours": {
"minItems": 1,
"maxItems": 20,
"type": "array",
"items": {
"type": "string"
},
"description": "Colours in display order. Hex (\"#1E293B\", \"#abc\"), rgb() or CSS colour names. No transparency."
},
"format": {
"type": "string",
"enum": [
"css",
"js"
]
}
},
"required": [
"colours",
"format"
],
"$schema": "http://json-schema.org/draft-07/schema#"
}출력 스키마
{
"type": "object",
"properties": {
"code": {
"type": "string"
}
},
"required": [
"code"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}커뮤니티
증거