SCSS 變數
將顏色匯出為 SCSS/Sass 變數。 免費線上使用 SCSS 變數，免註冊，於瀏覽器中快速且安全處理。
$primary
$secondary
$accent
$success
$warning
$error
// Color Variables
$primary: #6366f1;
$secondary: #ec4899;
$accent: #f59e0b;
$success: #10b981;
$warning: #f59e0b;
$error: #ef4444;
// Color Map
$colors: (
"primary": $primary,
"secondary": $secondary,
"accent": $accent,
"success": $success,
"warning": $warning,
"error": $error
);
// Usage functions
@function color($name) {
@return map-get($colors, $name);
}
// Generate utility classes
@each $name, $color in $colors {
.bg-#{$name} {
background-color: $color;
}
.text-#{$name} {
color: $color;
}
.border-#{$name} {
border-color: $color;
}
}// SCSS Mixins
@mixin background($color) {
background-color: $color;
@if lightness($color) > 50% {
color: #1a1a1a;
} @else {
color: #ffffff;
}
}
@mixin button-variant($bg, $hover: darken($bg, 10%)) {
background-color: $bg;
border-color: $bg;
@if lightness($bg) > 50% {
color: #1a1a1a;
} @else {
color: #ffffff;
}
&:hover {
background-color: $hover;
border-color: $hover;
}
}
// Usage
.my-button {
@include button-variant($primary);
}
.my-section {
@include background($secondary);
}SCSS 變數 可協助你直接在瀏覽器中處理顏色。
此工具適合需要快速可靠結果的設計師、開發者與創作者。
Supported formats
SCSS
Sass
CSS
Maps
How it works
1
Step 1
開啟 SCSS 變數
2
Step 2
輸入或匯入顏色
3
Step 3
複製、匯出或重複使用結果
應避免的常見錯誤
- 忘記檢查對比度可能影響可讀性。
- 使用太多顏色會讓調色盤較難套用。
專家提示
- 將主要顏色保存為 CSS 變數。
- 發布前請在淺色與深色模式測試調色盤。
Privacy guaranteed: everything is processed locally in your browser.
處理會盡可能在瀏覽器本機進行。不需要帳號。
用於顏色專案的SCSS 變數
將顏色匯出為 SCSS/Sass 變數。
無精度損失的SCSS 變數
轉換以精確值（HEX、RGB、HSL、OKLCH）執行。無視覺近似——色彩忠於您的設計意圖。
免費線上SCSS 變數
免註冊，免下載軟體。SCSS 變數100%免費，可於任何瀏覽器使用。免費方案每天可使用10次。
快速安全的SCSS 變數
處理直接在瀏覽器中完成，速度極快。資料不會傳送到伺服器，您的色彩與檔案保留在本機裝置。
用於分享與協作的SCSS 變數
可將結果匯出為 HEX、RGB、HSL、CSS、JSON 或一鍵複製。適合與團隊分享色彩規範或記錄設計系統。
探索所有顏色工具
只需幾次點擊即可擷取、轉換顏色，產生調色盤、漸層和 WCAG 對比度。
Related tools
指南和教學
透過詳細指南學習如何使用我們的工具。
Frequently asked questions
是的，此工具可免費線上使用。
為保護資料，處理會盡可能在瀏覽器中進行。