diff --git a/src/page-components/cards-detail/ColorCard.tsx b/src/page-components/cards-detail/ColorCard.tsx
index 5ace071..3c98183 100644
--- a/src/page-components/cards-detail/ColorCard.tsx
+++ b/src/page-components/cards-detail/ColorCard.tsx
@@ -1,4 +1,4 @@
-import { capitalize } from 'lodash-es';
+import { capitalize, isEmpty } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
 import { useColorFunction } from '../../ColorFunctionContext';
 import { useCopyColor } from '../../hooks/useCopyColor';
@@ -65,7 +65,9 @@ export function ColorCard({ color, copyMode }: ColorCardProps) {
       <div className={styles.description_line}>
         <div className={styles.title}>
           <span className={styles.name}>{color.name}</span>
-          <span className={styles.en_name}>{color.pinyin.map(capitalize).join(' ')}</span>
+          {!isEmpty(color.pinyin) && (
+            <span className={styles.en_name}>{color.pinyin.map(capitalize).join(' ')}</span>
+          )}
         </div>
         <div className={styles.color_value}>#{colorHex}</div>
       </div>